使用jQuery将DOM元素排序为order数组

Question

刚才我问了这个问题: javascript sort数组与order数组对齐,基于什么原来是一个错误的前提.(我已经活了很长时间,请给我休息一下).

我真正需要做的是对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很棒,因为它让事情变得简单,但如果你需要高性能,你应该宁愿不去.