Come ordinare gli elementi DOM durante la selezione in jQuery?

Question

Ho la seguente div sulla mia pagina:

<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> 

sto cercando di selezionare i div che utilizzano il codice jQuery $("div[id*=pi_div]").

Ho bisogno che i div vengano ordinati in base ai loro ID quando eseguo un each() sul selettore. Quando eseguo il loop dei DIV, l'ordine dovrebbe essere: PI_DIV1, PI_DIV2, PI_DIV3, PI_DIV4, PI_DIV5, PI_DIV6. Come posso farlo in jQuery?

Answer 1

È possibile chiamare .sort() prima di chiamare .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: Mi chiedevo perché le altre risposte stanno rimuovendo la parte pi_div dell'Es e ho capito. Se si confronta in base alle "stringhe" pi_div10 verrà prima di pi_div2.

Answer 2

Vorrei utilizzare il metodo 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 viene fornito con questo metodo definito internamente, in modo da poter ridurre a questo (comunque utilizza metodi non documentati) 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); 
}); 

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

Se voglio anche ordinarli visibilmente sulla pagina

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

Nota il ~~ che converte i valori in numeri interi, altrimenti verrebbero confrontati come stringhe.

Vedere http://jsfiddle.net/Xjc2T/