根据属性“数据排序”对 jQuery 中的 div 进行排序？

Question

如果我有几个 div：

<div data-sort='1'>div1</div>
<div data-sort='4'>div4</div>
<div data-sort='8'>div8</div>
<div data-sort='12'>div12</div>
<div data-sort='19'>div19</div>

并且我动态创建 div：

<div data-sort='14'>div1</div>
<div data-sort='6'>div1</div>
<div data-sort='9'>div1</div>

如何让它们按顺序排序到已加载的 div，而不必重新加载所有 div？

我认为我需要构建屏幕上所有 div 的数据排序值的数组，然后查看新 div 的位置，但我不确定这是否是最好的方法。

Answer 1

使用这个函数

   var result = $('div').sort(function (a, b) {

      var contentA =parseInt( $(a).data('sort'));
      var contentB =parseInt( $(b).data('sort'));
      return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
   });

   $('#mylist').html(result);

你可以在添加新的div之后调用这个函数。

如果您想在 div 中保留 javascript 事件，请不要使用 html 替换，如上面的示例所示。而是使用：

$(targetSelector).sort(function (a, b) {
    // ...
}).appendTo($container);

Answer 2

我把它变成了一个 jQuery 函数：

jQuery.fn.sortDivs = function sortDivs() {
    $("> div", this[0]).sort(dec_sort).appendTo(this[0]);
    function dec_sort(a, b){ return ($(b).data("sort")) < ($(a).data("sort")) ? 1 : -1; }
}

所以你有一个像“#boo”这样的大 div 和里面所有的小 div：

$("#boo").sortDivs();

由于 Chrome 中的错误，您需要“？ 1 : -1”，没有这个，它不会对超过 10 个 div 进行排序！ http://blog.rodneyrehm.de/archives/14 -Sorting-Were-Doing-It-Wrong.html

Answer 3

在这里回答了同样的问题：

• https://stackoverflow.com/a/23298715/1007358

重新发布：

经过许多搜索后我决定有关如何在 jquery 中排序的博客。总之，按数据属性对jquery“类数组”对象进行排序的步骤...

1. 通过jquery选择器选择所有对象
2. 转换为实际数组（不是类数组jquery对象）
3. 对对象数组进行排序将数组
4. 转换回jquery对象dom 对象

Html

<div class="item" data-order="2">2</div>
<div class="item" data-order="1">1</div>
<div class="item" data-order="4">4</div>
<div class="item" data-order="3">3</div>

普通 jquery 选择器

$('.item');

[<div class="item" data-order="2">2</div>,
 <div class="item" data-order="1">1</div>,
 <div class="item" data-order="4">4</div>,
 <div class="item" data-order="3">3</div>
]

让我们按数据顺序对其进行排序

function getSorted(selector, attrName) {
    return $($(selector).toArray().sort(function(a, b){
        var aVal = parseInt(a.getAttribute(attrName)),
            bVal = parseInt(b.getAttribute(attrName));
        return aVal - bVal;
    }));
}

> getSorted('.item', 'data-order')

[<div class="item" data-order="1">1</div>,
 <div class="item" data-order="2">2</div>,
 <div class="item" data-order="3">3</div>,
 <div class="item" data-order="4">4</div>
]

了解 getSorted() 的工作原理。

希望这会有所帮助！

Answer 4

我用它来对图像库进行排序，其中排序数组将通过 ajax 调用进行更改。希望它对某人有用。

var myArray = ['2', '3', '1'];
var elArray = [];

$('.imgs').each(function() {
    elArray[$(this).data('image-id')] = $(this);
});

$.each(myArray,function(index,value){
   $('#container').append(elArray[value]); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id='container'>
   <div class="imgs" data-image-id='1'>1</div>
   <div class="imgs" data-image-id='2'>2</div>
   <div class="imgs" data-image-id='3'>3</div>
</div>

小提琴：http://jsfiddle.net/ruys9ksg/