如何在jQuery中選擇時對DOM元素進行排序？

我有我的網頁上下面的DIV：如何在jQuery中選擇時對DOM元素進行排序？

<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（）時，我需要根據它們的ID對div進行排序。當我遍歷DIV時，順序應該是：PI_DIV1，PI_DIV2，PI_DIV3，PI_DIV4，PI_DIV5，PI_DIV6。我怎麼能在jQuery中做到這一點？

來源

2013-02-14 PushCode

排序*後*，而不是*期間*。 'jQuery（..）'返回一個「數組」類似的對象，還有一個'Array.sort'可以接受一個自定義的比較函數。 – 2013-02-14 15:49:16

這裏是一個解決類似的問題： [如何-MAY-I-排序一個一覽按字母順序使用-的jquery] [1] [1]：HTTP：//計算器。 com/questions/1134976/how-may-i-sort-a-list-alphabetically-using-jquery – Oliver 2013-02-14 15:55:15

您可以調用.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"));});

編輯之前調用.sort()：我很奇怪，爲什麼其他的答案被刪除的id pi_div一部分，我得到它。如果您根據「字符串」pi_div10比較將會在pi_div2之前。

來源

2013-02-14 15:53:02 koopajah

@HRK：你應該接受別人的回答，我的工作只是因爲你的元素數量有限。我讓它解釋了爲什麼它不能工作在一般 – koopajah 2013-02-14 16:07:24

這個功能是有缺陷的。它比較字符串值，這不會創建正確的結果。 – Tomalak 2013-02-14 16:08:06

@Tomalak>答案中寫得很清楚，我請求HRK接受另一個答案。我想讓它避免有人犯同樣的錯誤。 – koopajah 2013-02-14 16:08:53

我會使用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); 
});

來源

2013-02-14 15:53:27

$("div[id^=pi_div]").sort(function (a, b) { 
    return a.id.replace('pi_div', '') > b.id.replace('pi_div', ''); 
}).foo();

http://jsfiddle.net/KrX7t/

來源

2013-02-14 15:53:53 undefined

值得注意的是，jQuery的'.sort（）'方法僅供內部使用，並且沒有明確的目的。 – Blazemonger 2013-02-14 16:03:53

嚴格來說，不，它不是一個數組，或者它不需要'toArray（）'方法。但它看起來像一隻鴨子，像鴨子一樣嘎嘎叫。 – Blazemonger 2013-02-14 16:09:11

@Blazemonger .sort方法只是從本地Array.prototype.sort方法繼承而來。它不是jQuery的，它是爲外部使用而設計的，因爲它不是jQuery的一部分，所以它是無證的。 – y3sh 2013-03-10 16:20:08

如果您還希望在頁面上可見地對它們進行分類

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

請注意~~將值轉換爲整數，否則它們將作爲字符串進行比較。

請參閱http://jsfiddle.net/Xjc2T/

來源

2013-02-14 16:03:11 Tomalak

我會使用'parseInt'或者只是使用'+'將它們轉換爲數字。這更明顯一點。 – Blazemonger 2013-02-14 16:04:55

@Blazemonger嗯，你是對的，這將是同樣的事情。然而，'~~'也處理'undefined'和'Infinity'，所以我傾向於使用它。 – Tomalak 2013-02-14 16:10:52

感謝您添加'.appendTo（'＃container'）'，它更新DOM三中的元素排序順序。 – 2015-11-16 18:21:46

如何在jQuery中選擇時對DOM元素進行排序？

回答

相關問題