Question

我想根据data-position对div重新排序，我尝试了一下，但是没有用。

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>

请注意，该逻辑不会处理排序算法中的重复值，因此，如果需要，您将需要实现第二种排序方法。

Answer 2

没有jQuery，使用Array.from并方便地包装在可重用的函数中：

function sortChildren(containerSelector, reverse) {
  const container = document.querySelector(containerSelector);
  const order = reverse ? -1 : 1;
  
  Array.from(container.children)
    .sort((a, b) => order * parseInt(a.dataset.position, 10) - order * parseInt(b.dataset.position, 10))
    .forEach(element => container.appendChild(element));
    
  // Note you could also conditionally use Array.reverse() instead of the order variable.
}

sortChildren('#container1');
sortChildren('#container2', true);

body {
  display: flex;
  margin: 0;
  font-family: monospace;
  justify-content: space-around;
  align-items: flex-start;
}

.container {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 3px solid black;
  margin: 16px 0 0;
}

.container > li {
  padding: 4px 16px;
}

<ul class="container" id="container1">
    <li data-position="4">4</li>
    <li data-position="3">3</li>
    <li data-position="4">4</li>
    <li data-position="1">1</li>
    <li data-position="6">6</li>
</ul>

<ul class="container" id="container2">
    <li data-position="1">1</li>
    <li data-position="2">2</li>
    <li data-position="3">3</li>
    <li data-position="4">4</li>
    <li data-position="5">5</li>
    <li data-position="6">6</li>
    <li data-position="7">7</li>
</ul>

如您所见，无需删除元素，因为在添加元素时，它们将自动从先前位置移动到新位置。

如何按数据属性对div订单位置进行排序

2 个答案: