如何sortingDOM元素，而在jQuery中select？

我的网页上有以下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> 

我试图selectDiv使用jQuery代码$("div[id*=pi_div]") 。

当我在select器上执行each（）时，我需要根据它们的ID对div进行sorting。 当我遍历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"));}); 

编辑：我想知道为什么其他答案是删除的id的pi_div部分，我知道了。 如果您根据“string”进行比较，则pi_div10将在pi_div2之前pi_div2 。

Answer 2

 $("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 3

如果你也想在页面上显示它们

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

请注意将值转换为整数的~~ ，否则会将其作为string进行比较。

见http://jsfiddle.net/Xjc2T/

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确实有内部定义的这个方法，所以你可以缩短到这个（但是它使用未logging的方法） 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); });