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

Question

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

<div class="container">
    <div class="apple-0">first-apple</div>
    <div class="apple-1">second-apple</div>
    <div class="apple-2">third-apple</div>
    <div class="apple-3">forth-apple</div>
    <div class="apple-4">fifth-apple</div>
</div>

例如，我得到了一个数组，它是[3,4,0,2,1]，我需要将列表排序到这个order.By --我的意思是，第三个元素<div class="apple-3">third-apple</div>应该是第一个。第二个元素应该是forth-apple。

怎样才能有效地改变它呢？这是预期的产出：

<div class="container">
    <div class="apple-3">forth-apple</div>
    <div class="apple-4">fifth-apple</div>
    <div class="apple-0">first-apple</div>
    <div class="apple-2">third-apple</div>
    <div class="apple-1">second-apple</div>
</div>

可以使用jQuery。

Answer 1

您可以通过遍历数组并按照匹配的索引追加每个div来做到这一点。试试这个：

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

工作实例

注意，如果您需要支持旧的浏览器(< IE9)，那么您需要用一个标准的for循环替换forEach()。

Answer 2

只需迭代indexes数组并在nth索引处继续推子。

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(""));

演示

Answer 3

你可以试试这样的东西：

​

$("#sort").on("click", function() {
  var data = [3, 4, 0, 2, 1];
  var result = "";

  data.forEach(function(item) {
    result += $(".container").find(".apple-" + item)[0].outerHTML;
  });

  $(".container").html(result);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="container">
  <div class="apple-0">first-apple</div>
  <div class="apple-1">second-apple</div>
  <div class="apple-2">third-apple</div>
  <div class="apple-3">forth-apple</div>
  <div class="apple-4">fifth-apple</div>
</div>

<button id="sort">Sort</button>

​