刚才我问了这个问题: 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对象进行排序并简单地附加结果。事实并非如此。
答案 0 :(得分: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非常棒,因为它让事情变得简单,但是如果你需要高性能,你应该宁愿没有它。
答案 1 :(得分:1)
试试这个。
从DOM树中分离元素可以加快这个过程。
$modules.detach();
var len = order.length,
temp = [];
for( var i = 0; i < len; i++ ) {
temp.push( $modules[ order[i] ] );
}
$("#moduleWrap").append( temp );
答案 2 :(得分: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);