如何按数据属性对div顺序排序进行排序

Question

我想重新排序我的divs data-position,我试过这个,但它不起作用.

jQuery("#bout div.foot").sort(function(a, b) {
  var position = jQuery(this).attr("data-position");
  return parseInt(a.position) - parseInt(b.position);
}).each(function() {
  var elem = jQuery(this);
  elem.remove();
  jQuery(elem).appendTo("#bout");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container vendors" id="bout">
  <div class="col-md-6 foot" data-position="4">4</div>
  <div class="col-md-6 foot" data-position="3">3</div>
  <div class="col-md-6 foot" data-position="4">4</div>
  <div class="col-md-6 foot" data-position="1">1</div>
</div>

Answer 1

您this在sort()处理程序中使用关键字,而您需要使用a和b元素引用来比较它们.您也可以使用data()而不是attr()返回属性.这也将返回一个整数来否定需要parseInt().一旦元素被排序,你可以将append()它们放到容器中而不需要额外的each()循环.试试这个:

$("#bout div.foot").sort(function(a, b) {
  return $(a).data("position") - $(b).data("position");
}).appendTo("#bout");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container vendors" id="bout">
  <div class="col-md-6 foot" data-position="4">4</div>
  <div class="col-md-6 foot" data-position="3">3</div>
  <div class="col-md-6 foot" data-position="4">4</div>
  <div class="col-md-6 foot" data-position="1">1</div>
</div>

请注意,逻辑不处理排序算法中的重复值,因此如果需要,您需要实现二级排序方法.