时间戳

首页 > 解决方案 > 使用 .sort 按字母顺序对元素进行排序时出现问题

javascript - 使用 .sort 按字母顺序对元素进行排序时出现问题

问题描述

使用 jquery 进行排序时遇到问题。元素未排序。我使用了 javascript .sort 但如果属性是数字而不是文本，这对我来说很好。我可以使用 append 解决问题，但这不是我愿意使用的。有人可以解决这个代码。

jQuery(document).ready(function($) {
  var divList = $(".listing-item");
  var gg = divList.get().sort(function(a, b) {
    return $(a).data("listing-title") < $(b).data("listing-title");
  });
  console.log(gg);
  $("#list").html(divList);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">
  <div class="listing-item" data-listing-title="a">
    a
  </div>
  <div class="listing-item" data-listing-title="z">
    z
  </div>
  <div class="listing-item" data-listing-title="b">
    b
  </div>
  <div class="listing-item" data-listing-title="c">
    c
  </div>
</div>

标签： javascriptjquery

解决方案

你不需要jQuery，我认为问题是你的比较函数，像这样，应该为你完成这项工作：

//First select the items
const items = document.querySelectorAll('div#list > .listing-item');
//Next, transform this to an array using `from`, then compare
//using `sort`, finally iterate over the sorted array using `forEach`,
//and append element in the sorted array to the `#list`.
//
Array
  .from(items)
  .sort((x,y) => {
    const valueX = x.dataset.listingTitle;
    const valueY = y.dataset.listingTitle;

    if(valueX > valueY) return 1;
    else if(valueX < valueY) return -1;
    else return 0;
  })
  .forEach(element => document.getElementById('list').appendChild(element));

推荐阅读