Javascript 使用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>

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 -->

我需要的是：

<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对象进行排序并简单地附加结果。事实并非如此。

我只需迭代

顺序

数组，并相应地重新排列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]));
}

var wrapper=document.getElementById（'modulewrapp'）；
对于（变量i=0，l=order.length；i

jQuery很好，因为它使事情变得简单，但是如果您需要高性能，您最好不要使用它。

试试这个

从DOM树中分离元素可能会加快进程

$modules.detach();

var len = order.length,
    temp = [];

for( var i = 0; i < len; i++ ) {
  temp.push( $modules[ order[i] ] );
}

$("#moduleWrap").append( temp );

$modules.detach（）；
var len=订单长度，
温度=[]；
对于（变量i=0；i

在这里拉小提琴

---

​

我知道现在已经晚了，但也许这会对某人有所帮助。我试图做一件类似的事情，费利克斯·克林的回答让我达到了90%。但在我的例子中，我有一个div id，它等于order值，如下所示：

<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>

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 -->

---

我不相信您可以附加Dom元素数组。此外，它不能在Dom中添加。它必须被取代。纯js回答可以接受。@freshyeball：是的，你可以传递一个元素数组（见文档），为什么不能附加（添加）元素？如果元素已经存在于DOM中，它将被移动到新位置，而不是克隆。这是重新排列DOM元素的一种非常简单的方法。可以告诉您可以附加元素，但不能附加数组。顺便说一句，回答得很好。如果你真的那么关心性能，那么为什么首先要使用jquery？应用程序的另一部分是使用highcharts，这需要它（实际上我使用的是Zepto）。我没有将不同的js文件提供给不同的视图，而是通过将js绑定到单个文件来利用浏览器缓存。这里不一定需要Jquery。