jQuery'de seçilirken DOM öğeleri nasıl sıralanır?

Question

benim sayfasında aşağıdaki DIV'leri vardır: jQuery kodu $("div[id*=pi_div]") kullanarak divs seçmek çalışıyorum

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

.

Seçicideki her bir() işareti kullandığımda, kimlikleri temel alınarak sıralanmış divlara ihtiyacım var. DIV'lerden geçerken, sipariş şu şekilde olmalıdır: PI_DIV1, PI_DIV2, PI_DIV3, PI_DIV4, PI_DIV5, PI_DIV6. Bunu jQuery'de nasıl yapabilirim? Diğer cevaplar id pi_div bölümünü kaldırarak neden merak ve anladım:

Answer 1

Sen .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 çağırmadan önce .sort() çağırabilir. pi_div10 "dizeleri" ile karşılaştırırsanız, pi_div2'dan önce gelir.

Answer 2

Array.sort yöntemini kullanırdım. 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); 
}); 

Eğer (ancak belgesiz yöntemler kullanır) Buna http://jsfiddle.net/LJWrg/1/ kısaltmak böylece jQuery, içten tanımlanan bu yöntemle geliyor:

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

Eğer varsa Ayrıca bunları görsel olarak görsel olarak sıralamak isteriz:

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

Değerleri tamsayılara dönüştüren ~~'u not edin, aksi takdirde bunlar dizeler olarak karşılaştırılır.

Bkz. http://jsfiddle.net/Xjc2T/