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

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]我需要按此顺序对列表进行排序。我的意思是第三个元素 <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');
});

Working example

请注意，如果您需要支持旧版浏览器 (< IE9)，那么您需要将 forEach() 替换为标准 for 循环。