jquery - 如何在 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

您可以在调用.each( )之前调用.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/

Answer 4

我会使用 Array.sort 方法。http://jsfiddle.net/LJWrg/

var divArr = $("div[id*=pi_div]");
function cleanId(id) {
    return parseInt(id.replace("pi_div",""),10);
}
Array.prototype.sort.call(divArr,function(a,b) {
    return cleanId(a.id) > cleanId(b.id);
});
divArr.each(function(){
    console.log(this.id);
});

jQuery 确实带有内部定义的此方法，因此您可以将其缩短为此（但是它使用未记录的方法）http://jsfiddle.net/LJWrg/1/：

var divArr = $("div[id*=pi_div]");
function cleanId(id) {
    return parseInt(id.replace("pi_div",""),10);
}
divArr.sort(function(a,b) {
    return cleanId(a.id) > cleanId(b.id);
});
divArr.each(function(){
    console.log(this.id);
});