在 jQuery 中选择时如何对 DOM 元素进行排序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14878638/
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
How to sort DOM elements while selecting in jQuery?
提问by PushCode
I have the following DIVs on my page:
我的页面上有以下 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>
I am trying to select the Divs using the jQuery code $("div[id*=pi_div]").
我正在尝试使用 jQuery 代码选择 Div $("div[id*=pi_div]")。
I need the divs to be sorted based on their IDs when I do an each() on the selector. When I loop through the DIVs, the order should be: PI_DIV1, PI_DIV2, PI_DIV3, PI_DIV4, PI_DIV5, PI_DIV6. How can I do that in jQuery?
当我在选择器上执行 each() 时，我需要根据它们的 ID 对 div 进行排序。当我遍历 DIV 时，顺序应该是：PI_DIV1、PI_DIV2、PI_DIV3、PI_DIV4、PI_DIV5、PI_DIV6。我怎样才能在 jQuery 中做到这一点？
采纳答案by koopajah
You can call .sort()before calling .each()
$("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"));});
EDIT: I was wondering why the other answers are removing the pi_divpart of the id and I get it. If you compare based on the "strings" pi_div10will come before pi_div2.
编辑：我想知道为什么其他答案删除pi_div了 id的一部分，我明白了。如果根据“字符串”进行比较，pi_div10则会出现在pi_div2.
回答by Tomalak
If you also want to sort them visibly on the page
如果您还想在页面上对它们进行明显排序
$('div[id^="pi_div"]').sort(function (a, b) {
var re = /[^\d]/g;
return ~~a.id.replace(re, '') > ~~b.id.replace(re, '');
})
.appendTo("#container");
Note the ~~which converts the values into integers, otherwise they would be compared as strings.
请注意~~将值转换为整数的 ，否则它们将作为字符串进行比较。
回答by undefined
$("div[id^=pi_div]").sort(function (a, b) {
return a.id.replace('pi_div', '') > b.id.replace('pi_div', '');
}).foo();
回答by Kevin B
I would use the Array.sort method. http://jsfiddle.net/LJWrg/
我会使用 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 does come with this method internally defined, so you can shorten it to this (however it uses undocumented methods) http://jsfiddle.net/LJWrg/1/:
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);
});
