如何以有效的方式按给定数组对节点列表进行排序

How to sort a list of nodes by a given array in an efficient way?

本文关键字:节点 列表 排序 数组 有效 方式按      更新时间:2023-09-26

我有这个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。

您可以通过

循环遍历数组并通过其匹配的索引附加每个div来执行此操作。试试这个:

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

工作示例

请注意,如果您需要支持较旧的浏览器(<IE9),则需要将forEach()替换为标准for循环。>

你可以尝试这样的事情:

$("#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>

只需迭代 indexes 数组并继续在第 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(""));

演示

你可以试试:

更新:

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的每个循环都可以带来性能优势。所以我对此的回答是

$(document).ready(function () {
   var inputEls = $('#awesomeContainer').find('>').get(),
       $output = $('#awesomeOutput'),
       order = [3,4,0,2,1],
       output = [],
       myValue,
       newIndex,
       i,
       length = inputEls.length;
  
   for (i = 0; i < length; i += 1) {
     myValue = Number((inputEls[i].className || "").replace("apple-", ""));
     if (myValue >= 0) {
       myValue = order.indexOf(myValue);
       myValue > -1 && (output[myValue] = inputEls[i].outerHTML);       
     }
   }
   
   $output.append(output.join(''));
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<b>Input: </b>
<div id="awesomeContainer" 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>
<br/>
<b>Sorted: </b>
<div id="awesomeOutput" class="container">
</div>