Javascript 根据属性“数据排序”对 jQuery 中的 div 进行排序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6133723/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sort divs in jQuery based on attribute 'data-sort'?
提问by TaylorMac
If I have several divs:
如果我有几个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>
And I dynamically create the divs:
我动态创建 div：
<div data-sort='14'>div1</div>
<div data-sort='6'>div1</div>
<div data-sort='9'>div1</div>
How can I get them to just sort into the divs already loaded in order, without having to reload all of the divs?
我怎样才能让它们按顺序排列到已经加载的 div 中，而不必重新加载所有的 div？
I think that I would need to build an array of the data-sort values of all of the divs on the screen, and then see where the new divs fit in, but I am not sure if this is the best way.
我认为我需要构建一个屏幕上所有 div 的数据排序值数组，然后查看新 div 的位置，但我不确定这是否是最好的方法。
回答by Jayantha Lal Sirisena
Use this function
使用这个功能
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);
You can call this function just after adding new divs.
您可以在添加新 div 后立即调用此函数。
If you want to preserve javascript events within the divs, DO NOT USE html replace as in the above example. Instead use:
如果你想在 div 中保留 javascript 事件，不要像上面的例子那样使用 html 替换。而是使用：
$(targetSelector).sort(function (a, b) {
// ...
}).appendTo($container);
回答by PJ Brunet
I made this into a jQuery function:
我把它变成了一个 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; }
}
So you have a big div like "#boo" and all your little divs inside of there:
所以你有一个像“#boo”这样的大 div 以及里面所有的小 div：
$("#boo").sortDivs();
$("#boo").sortDivs();
You need the "? 1 : -1" because of a bug in Chrome, without this it won't sort more than 10 divs! http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html
由于 Chrome 中的错误，您需要“？1：-1”，否则它不会对超过 10 个 div 进行排序！http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html
回答by Troy Grosfield
Answered the same question here:
在这里回答了同样的问题：
To repost:
转贴：
After searching through many solutions I decided to blog about how to sort in jquery. In summary, steps to sort jquery "array-like" objects by data attribute...
在搜索了许多解决方案之后，我决定写一篇关于如何在 jquery 中排序的博客。总之，按数据属性对jquery“类数组”对象进行排序的步骤......
- select all object via jquery selector
- convert to actual array (not array-like jquery object)
- sort the array of objects
- convert back to jquery object with the array of dom objects
- 通过 jquery 选择器选择所有对象
- 转换为实际数组（不是类似数组的 jquery 对象）
- 对对象数组进行排序
- 使用 dom 对象数组转换回 jquery 对象
Html
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>
Plain jquery selector
普通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> ]
Lets sort this by data-order
让我们按数据顺序排序
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> ]
Hope this helps!
希望这可以帮助！
回答by Grant
I used this to sort a gallery of images where the sort array would be altered by an ajax call. Hopefully it can be useful to someone.
我用它来对图像库进行排序，其中排序数组将被 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>Fiddle: http://jsfiddle.net/ruys9ksg/
