Question

我有一个容器元素，其中包含具有数据索引值的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>

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

Answer 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>

Answer 2

您可以按以下方式尝试使用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>

Answer 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>

Answer 4

使用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>

Answer 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);

通过数据索引值对元素进行排序

5 个答案: