javascript - 使用 jQuery 对 DOM 元素进行排序以对数组进行排序

Question

刚才我问了这个问题: javascript sort array to align with order array基于事实证明是错误的前提。 (我已经起来太久了，请让我休息一下)。

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

Answer 1

我只是遍历 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 很棒，因为它使事情变得简单，但如果您需要高性能，您最好不要使用它。