代码之家 › 专栏 › 技术社区 › SteinTech

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

sorting jquery javascript

SteinTech · 技术社区 · 7 年前

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

那么,如何根据数据索引值对元素进行排序呢?

5 回复 | 直到 7 年前

Salman Arshad 7 年前

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

enxaneta 7 年前

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>

Mamun 7 年前

你可以试试 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>

brk 7 年前

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

Osama 7 年前

获取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);

推荐文章

user66001 · 对多维数组/arraylist/hashtable进行排序

10 月前

Rewind · 同时搜索最大值/最小值的操作顺序

10 月前

papirosnik · 为什么按长度对字符串进行排序会得到不正确的结果?

11 月前

badbee · 使用xsl:sort时保留未排序元素的问题

11 月前

CottonDog · 如何在使用sort()[复制]将数组元素展平并按降序排序后保留其索引

11 月前

josepmaria · Pandas顺序列,按对列出

1 年前

BTBts · Python3文件名的字母数字排序[重复]

1 年前

Paul-ET · 对树状图应用程序发送的第一列进行排序失败

1 年前

VonDerHase · 从列表中删除特定值,Python

1 年前

Nico44044 · JS对数组进行排序,数组末尾为null和空值

1 年前