在jQuery中选择时如何对DOM元素进行排序？
在jQuery中选择时如何对DOM元素进行排序？
提问于 2013-02-14 23:46:46
我的页面上有以下DIVs：
<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()时，我需要div根据它们的ID进行排序。当我遍历DIVs时，顺序应该是: PI_DIV1，PI_DIV2，PI_DIV3，PI_DIV4，PI_DIV5，PI_DIV6。我如何在jQuery中做到这一点？
回答 3
Stack Overflow用户
发布于 2013-02-15 00:03:11
如果您还想在页面上直观地对它们进行排序
$('div[id^="pi_div"]').sort(function (a, b) {
var re = /[^\d]/g;
return ~~a.id.replace(re, '') > ~~b.id.replace(re, '');
})
.appendTo("#container");请注意将值转换为整数的~~，否则它们将被作为字符串进行比较。
Stack Overflow用户
发布于 2013-02-14 23:53:54
$("div[id^=pi_div]").sort(function (a, b) {
return a.id.replace('pi_div', '') > b.id.replace('pi_div', '');
}).foo();Stack Overflow用户
发布于 2013-02-14 23:53:27
我会使用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);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14878638
复制相关文章
相似问题