使用jQuery對DOM元素進行排序

剛纔我問了這個問題： javascript sort array to align with order array基於什麼原來是一個錯誤的前提。（我打了太久了，請給我休息一下）。使用jQuery對DOM元素進行排序

我真正需要做的是對DOM元素進行排序。 在我的應用程序中，性能是關鍵，因爲它將在CPU非常差的情況下運行。因此，我已經是這樣的：

<div id="moduleWrap"> 
    <div class="module">Jack</div> <!-- 0 --> 
    <div class="module">Jill</div> <!-- 1 --> 
    <div class="module">Nancy</div> <!-- 2 --> 
    <div class="module">Tom</div>  <!-- 3 --> 
    <div class="module">Cartman</div> <!-- 4 --> 
</div>

而且在JavaScript：

$modules = $('#moduleWrap .module'); 
order = [3,1,4,0,2];

我需要的是這樣的：

<div id="moduleWrap"> 
    <div class="module">Tom</div>  <!-- 3 --> 
    <div class="module">Jill</div> <!-- 1 --> 
    <div class="module">Cartman</div> <!-- 4 --> 
    <div class="module">Jack</div> <!-- 0 --> 
    <div class="module">Nancy</div> <!-- 2 --> 
</div>

我認爲（錯誤的），我可以排序jQuery對象，並簡單地附加結果。事實並非如此。

來源

2012-10-31 Fresheyeball

只需按元素，如果你真的關心性能那麼爲什麼你首先使用jQuery？ – georg

該應用程序的另一部分是使用highcharts，它需要它（實際上我正在使用Zepto）。而不是將不同的js文件提供給不同的視圖，我通過將js捆綁到單個文件中來利用瀏覽器緩存。 jquery在這裏不一定需要。 – Fresheyeball

我只想遍歷數組order並據此重新排列DOM元素：

var elements = []; 
$.each(order, function(i, position) { 
    elements.push($modules.get(position)); 
}); 

$('#moduleWrap').append(elements);

DEMO

爲了提高性能，可以越來越多的jQuery帶走。例如：

var wrapper = document.getElementById('moduleWrap'); 
for(var i = 0, l = order.length; i < l; i++) { 
    wrapper.appendChild($modules.get(order[i])); 
}

DEMO

jQuery是偉大的，因爲它使事情變得簡單，但如果你需要高性能，你應該去，而沒有它。

來源

2012-10-31 00:14:38

我不相信你可以附加一個Dom元素的數組。此外，它不能在Dom中。它必須取代。純js答案可以接受。 – Fresheyeball

@Fresheyeball：是的，您可以傳遞一組元素（請參閱文檔），爲什麼不能追加（添加）元素？如果該元素已經存在於DOM中，它將被移動到新的位置，而不會被克隆。這是重新排列DOM元素的一種非常簡單的方法。 –

至於。可以告訴你可以附加元素，但不能是數組。很好的答案btw。 – Fresheyeball

試試這個。

從DOM樹中分離元素可能會加速此過程。

$modules.detach(); 

var len = order.length, 
    temp = []; 

for(var i = 0; i < len; i++) { 
    temp.push($modules[ order[i] ]); 
} 

$("#moduleWrap").append(temp);

小提琴這裏http://jsfiddle.net/rEFu3/

來源

2012-10-31 00:50:32 Bruno

我知道這是遲到了，但也許它會幫助別人。我正在嘗試做類似的事情，#Felix Kling的回答讓我有90％的迴應。但是，在我來說，我有一個div id，這將等於訂單價值，就像這樣：

order = [3,1,4,0,2]; 

<div id="0" class="module">Jack</div> <!-- 0 --> 
<div id="1" class="module">Jill</div> <!-- 1 --> 
<div id="2" class="module">Nancy</div> <!-- 2 --> 
<div id="3" class="module">Tom</div>  <!-- 3 --> 
<div id="4" class="module">Cartman</div> <!-- 4 -->

那麼我就可以使用位置值

var elements = []; 
$.each(order, function(i, position) { 
    elements.push($('#'+position)); 
}); 

$('#moduleWrap').append(elements);

來源

2014-08-31 14:14:22 Bwyss

使用jQuery對DOM元素進行排序

回答

相關問題