如何在jQuery中选择时对DOM元素进行排序？

Question

我的页面上有以下DIV:

<div id="pi_div3">
  Div 3
</div>
<div id="pi_div2">
  Div 2
</div>
<div id="pi_div1">
  Div 1
</div>
<div id="pi_div6">
  Div 6
</div>
<div id="pi_div5">
  Div 5
</div>
<div id="pi_div4">
  Div 4
</div>

我试图使用jQuery代码选择Div $("div[id*=pi_div]").

当我在选择器上执行each()时,我需要根据ID来对div进行排序.当我循环遍历DIV时,顺序应为:PI_DIV1,PI_DIV2,PI_DIV3,PI_DIV4,PI_DIV5,PI_DIV6.我怎么能在jQuery中做到这一点？

Answer 1

你可以调用的.sort()调用之前.每个()

$("div[id*=pi_div]").sort(function(a,b){
    if(a.id < b.id) {
        return -1;
    } else {
        return 1;
    }
}).each(function() { console.log($(this).attr("id"));});

编辑:我想知道为什么其他答案正在删除pi_divid 的一部分,我得到它.如果你比较基于"字符串" pi_div10将来pi_div2.

Answer 2

如果您还想在页面上对它们进行明显排序

$('div[id^="pi_div"]').sort(function (a, b) {
    var re = /[^\d]/g;
    return ~~a.id.replace(re, '') > ~~b.id.replace(re, '');
})
.appendTo("#container");

注意,~~它将值转换为整数,否则它们将被比较为字符串.

见http://jsfiddle.net/Xjc2T/

Answer 3

$("div[id^=pi_div]").sort(function (a, b) {
    return a.id.replace('pi_div', '') > b.id.replace('pi_div', '');
}).foo();

http://jsfiddle.net/KrX7t/