Question

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

Answer 1

您只需要在排序功能中返回一个数字。如果第一个应该放在第二个之前，则返回-1。所以排序升序

您可以添加更多条件。

if($(a).data("listing-title") > $(b).data("listing-title")) return 1->降序 if($(a).data("listing-title") = $(b).data("listing-title")) return 0->不进行排序

并在HTML中放入排序后的列表（用gg代替divList）

jQuery(document).ready(function($) {
  var divList = $(".listing-item");
  var gg = divList.get().sort(function(a, b) {
    if($(a).data("listing-title") < $(b).data("listing-title")) {
    return -1 ;
    }
  });
  console.log(gg);
  $("#list").html(gg);
});

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

Answer 2

尝试使用.localeCompare()。我已经从jQuery - Sorting div contents

中提取了此工作内容

<!DOCTYPE html>
<htm>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
   var divList = $(".listing-item");
   divList.sort(function(a, b) {
    return 	$(a).data("listing-title").toUpperCase().localeCompare($(b).data("listing-title").toUpperCase());
});
   $("#list").html(divList);
});
</script>
</head>
<body>

<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>
</body>
</html>

另请参阅类似的问题How may I sort a list alphabetically using jQuery?

Answer 3

您不需要jQuery，我认为问题是您的比较函数（类似这样的东西）应该可以帮助您完成工作：

<html>
<body> <div placeholder-rule="dataset"></div> </body>
</html>

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

3 个答案: