3

刚才我问了这个问题： javascript sort array to align with order array based on what原来是错误的前提。（我已经起床太久了，请让我休息一下）。

我真正需要做的是对 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 对象进行排序并简单地附加结果。事实并非如此。

4

3 回答 3

9

我只需遍历order数组并相应地重新排列 DOM 元素：

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

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

演示

为了提高性能，你可以带走越来越多的 jQuery。例如：

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

演示

jQuery 很棒，因为它让事情变得简单，但是如果你需要高性能，你宁愿不用它。

于 2012-10-31T00:14:38.817 回答
1

试试这个。

从 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/ ​</p>

于 2012-10-31T00:50:32.273 回答
1

我知道这已经晚了，但也许它会对某人有所帮助。我试图做类似的事情，#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-31T14:14:22.610 回答