javascript - 按数据索引值对元素进行排序

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>