使用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元素进行排序

回答

相关问题