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

【问题标题】：How to sort DOM elements while selecting in jQuery?如何在 jQuery 中选择时对 DOM 元素进行排序？
【发布时间】：2013-01-30 11:31:02
【问题描述】：

我的页面上有以下 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[id*=pi_div]") 选择 Div。

当我在选择器上执行 each() 时，我需要根据它们的 ID 对 div 进行排序。当我遍历 DIV 时，顺序应该是：PI_DIV1、PI_DIV2、PI_DIV3、PI_DIV4、PI_DIV5、PI_DIV6。如何在 jQuery 中做到这一点？

【问题讨论】：

排序之后，而不是期间。 jQuery(..) 返回一个“类似数组”的对象，并且有一个 Array.sort 可以采用自定义比较函数。
这是一个已解决的类似问题：[how-may-i-sort-a-list-alphabetically-using-jquery][1] [1]: stackoverflow.com/questions/1134976/…

标签： jquery sorting

【解决方案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"));});

编辑：我想知道为什么其他答案正在删除 id 的 pi_div 部分，我明白了。如果根据“字符串”进行比较，pi_div10 将排在pi_div2 之前。

【讨论】：

@HRK ：您应该接受别人的回答，我的工作只是因为您的元素数量有限。我让它解释为什么它不能正常工作
这个函数有缺陷。它比较字符串值，这不会产生正确的结果。
@Tomalak > 答案中写得很清楚，我要求 HRK 接受另一个。我想留下它以避免有人犯同样的错误。
在我写我的之前，我看不到您的评论。 :)
我会等到 OP 再次上线。他还没有看到你的评论。已接受的答案无法删除。

【解决方案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/

【讨论】：

我会使用parseInt 或使用“+”将它们转换为数字。更明显一点。
@Blazemonger 好吧，你是对的，这将是同样的事情。但是，~~ 也处理 undefined 和 Infinity，所以我倾向于使用它。
感谢您添加 .appendTo('#container') 以更新 DOM 三中的元素排序顺序。

【解决方案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/

【讨论】：

值得注意的是，jQuery 的 .sort() 方法是供内部使用的，并且没有记录在案。
严格来说，不，它不是一个数组，或者它不需要有toArray() 方法。但它看起来像鸭子，叫起来像鸭子。
@Blazemonger .sort 方法只是继承自本机 Array.prototype.sort 方法。它不是 jQuery 的，它是供外部使用的，它没有记录，因为它不是 jquery 的一部分。

【解决方案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);
});

【讨论】：