按数据索引值排序元素[重复]答案

【问题标题】：Order elements by a data-index value [duplicate]按数据索引值排序元素[重复]
【发布时间】：2018-09-16 14:19:50
【问题描述】：

我有一个容器元素，其中包含具有数据索引值的 div 元素。我想通过数据索引对元素重新排序，所以它们显示为 1、2 和 3。

<div class="container">
    <div class="col-md-4" data-index="3">Col 3</div>
    <div class="col-md-4" data-index="1">Col 1</div>
    <div class="col-md-4" data-index="2">Col 2</div>
</div>

那么如何按数据索引值对元素进行排序呢？

【问题讨论】：

在页面中自行排序？这些 div 是如何直接生成的？
当网站调整大小时，元素将被分离并附加

标签： javascript jquery sorting

【解决方案1】：

我正在使用 flexbox 来改变 div 的顺序：

let cols = Array.from(document.querySelectorAll(".container .col-md-4"));
cols.map((col)=>{
  let index = col.dataset.index;
  col.style.order = index;
})

.container{display:flex;flex-direction:column;}

<div class="container">
    <div class="col-md-4" data-index="3">Col 3</div>
    <div class="col-md-4" data-index="1">Col 1</div>
    <div class="col-md-4" data-index="2">Col 2</div>
</div>

【讨论】：

这很聪明，DOM 没有任何变化
.forEach 更有意义。 OP 可能正在使用 CSS 框架（引导程序），因此更改盒子模型可能会产生比它解决的问题更多的问题。

【解决方案2】：

使用document.querySelector 获取所有子元素，然后使用sort 对该集合进行排序并遍历该集合以将元素附加回div

function reorder() {
  let orderedString = '';
  [...document.querySelectorAll('.container div')].sort(function(a, b) {
    return a.dataset.index - b.dataset.index

  }).forEach(function(item) {
    document.querySelector('.container').appendChild(item)
  })

}

<div class="container">
  <div class="col-md-4" data-index="3">Col 3</div>
  <div class="col-md-4" data-index="1">Col 1</div>
  <div class="col-md-4" data-index="2">Col 2</div>
</div>
<button onclick="reorder()">Order</button>

【讨论】：

【解决方案3】：

使用带有适当回调的Array.sort 函数：

$(".container div").sort(function(a, b) {
  return $(a).data("index") - $(b).data("index");
}).appendTo(".container");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="col-md-4" data-index="3">Col 3</div>
  <div class="col-md-4" data-index="1">Col 1</div>
  <div class="col-md-4" data-index="2">Col 2</div>
</div>

【讨论】：

【解决方案4】：

您可以尝试使用sort()、attr() 和appendTo()，如下所示：

$('.container div').sort(function(a,b) {
     a = Number($(a).attr('data-index'));
     b = Number($(b).attr('data-index'));
     return a - b;
}).appendTo('.container');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="col-md-4" data-index="3">Col 3</div>
    <div class="col-md-4" data-index="1">Col 1</div>
    <div class="col-md-4" data-index="2">Col 2</div>
</div>

【讨论】：

我猜sort() 应该返回a - b 而不是a > b；它是 -1、0 或 1，具体取决于 a 是否小于、等于或大于 b。

【解决方案5】：

获取 div 并使用 sort() 对其进行排序，然后使用 html() 附加到父文档

var divList = $(".col-md-4");
divList.sort(function(a, b){
return $(a).data("data-index")-$(b).data("data-index")
});
$(".container").html(divList);

【讨论】：