Javascript 如何按给定数组对节点列表进行有效排序？

我有一个HTML，它是一个元素列表：

第一个苹果
第二个苹果
第三个苹果
第四苹果
第五个苹果

例如，我得到了一个数组，它是

[3,4,0,2,1]

我需要按照这个顺序对列表进行排序。我的意思是第三个元素

第三个apple

应该是第一个。第二个元素应该是

forth apple

如何以有效的方式进行更改？这是预期输出：

第四苹果
第五个苹果
第一个苹果
第三个苹果
第二个苹果

---

可以使用jQuery

只需迭代

索引

数组，并在第n个索引处不断推送子级

var output = [];
var indexes = [3,4,0,2,1];
indexes.forEach(function(value, index){
  output.push($(".container div").eq(indexes[index])[0].outerHTML);
});
console.log(output);
$(".container").html(output.join(""));

---

只需迭代

索引

数组，并在第n个索引处不断推送子级

var output = [];
var indexes = [3,4,0,2,1];
indexes.forEach(function(value, index){
  output.push($(".container div").eq(indexes[index])[0].outerHTML);
});
console.log(output);
$(".container").html(output.join(""));

---

您可以通过在数组中循环并通过匹配的索引追加每个

div

来完成此操作。试试这个：

var $divs = $('.container > div').detach();
[3, 4, 0, 2, 1].forEach(function(value) {
    $divs.eq(value).appendTo('.container');
});

---

请注意，如果需要支持较旧的浏览器（forEach（）替换为标准的

for

循环。

可以通过循环数组并通过匹配的索引附加每个

div

。试试这个：

var $divs = $('.container > div').detach();
[3, 4, 0, 2, 1].forEach(function(value) {
    $divs.eq(value).appendTo('.container');
});

---

请注意，如果您需要支持较旧的浏览器（forEach（）替换为标准的

for

循环。

您可以尝试以下方法：

$（“#排序”）。在（“单击”，函数（）{
var数据=[3,4,0,2,1]；
var结果=”；
data.forEach（功能（项）{
结果+=$（“.container”）.find（“.apple-”+项）[0]；
});
$（“.container”）.html（结果）；
})

第一个苹果
第二个苹果
第三个苹果
第四苹果
第五个苹果
排序

您可以尝试以下方法：

$（“#排序”）。在（“单击”，函数（）{
var数据=[3,4,0,2,1]；
var结果=”；
data.forEach（功能（项）{
结果+=$（“.container”）.find（“.apple-”+项）[0]；
});
$（“.container”）.html（结果）；
})

第一个苹果
第二个苹果
第三个苹果
第四苹果
第五个苹果
排序

您可以尝试：

更新：

var arr = [3,4,0,2,1];
var nodes = [];
arr.forEach(funtion(value){
    var node = $('.container .apple-'+value)[0];
    nodes.push(node);
            });
$('.container').html(nodes);

您可以尝试：

更新：

var arr = [3,4,0,2,1];
var nodes = [];
arr.forEach(funtion(value){
    var node = $('.container .apple-'+value)[0];
    nodes.push(node);
            });
$('.container').html(nodes);

---

使用

eq

的其他答案是好的，但是如果您想使用不同的数组再次排序，或者数组最初未排序，那么它们将失败。此外，您还要求提供一种有效的方法，使用本机循环而不是jquery的每个循环都可以提高性能。所以我的答案是

$（文档）.ready（函数（）{
var inputEls=$（'#awesomeContainer'）.find（'>'）.get（），
$output=$（“#awesomeOutput”），
顺序=[3,4,0,2,1]，
输出=[]，
我的价值，
新索引，
我
长度=输入。长度；
对于（i=0；i=0）{
myValue=order.indexOf（myValue）；
myValue>-1&（输出[myValue]=输入[i].outerHTML）；
}
}
$output.append（output.join（“”））；
});

输入：
第一个苹果
第二个苹果
第三个苹果
第四苹果
第五个苹果


分类：
使用
eq
的其他答案很好，但是如果您想使用不同的数组再次排序，或者数组最初未排序，那么它们将失败。此外，您还要求提供一种有效的方法，使用本机循环而不是jquery的每个循环都可以提高性能。所以我的答案是


$（文档）.ready（函数（）{
var inputEls=$（'#awesomeContainer'）.find（'>'）.get（），
$output=$（“#awesomeOutput”），
顺序=[3,4,0,2,1]，
输出=[]，
我的价值，
新索引，
我
长度=输入。长度；
对于（i=0；i=0）{
myValue=order.indexOf（myValue）；
myValue>-1&（输出[myValue]=输入[i].outerHTML）；
}
}
$output.append（output.join（“”））；
});

输入：
第一个苹果
第二个苹果
第三个苹果
第四苹果
第五个苹果


分类：
@Rorymcrossan抱歉。但是没有排序逻辑，只有一个给定的array@RoryMcCrossan很抱歉但是没有排序逻辑，只有给定的数组你真聪明！泰克斯：）你真聪明！Thx:）@Rorymcrossan，我添加了预购示例：）@Rorymcrossan，我添加了预购示例：）