如果我有几个 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 的位置，但我不确定这是否是最好的方法。
使用这个功能
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);
我把它变成了一个 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
在这里回答了同样的问题：
转贴：
在搜索了许多解决方案之后，我决定写一篇关于如何在 jquery 中排序的博客。总之，按数据属性对jquery“类数组”对象进行排序的步骤......
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> ]
让我们按数据顺序排序
函数 getSorted(selector, attrName) {
返回 $($(selector).toArray().sort(function(a, b){
var aVal = parseInt(a.getAttribute(attrName)),
bVal = parseInt(b.getAttribute(attrName));
返回 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> ]
希望这可以帮助！
我使用它对图像库进行排序，其中排序数组将通过 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/