Question

我需要按两个值对div列表进行排序。在我的示例中，持续时间最短的div应该位于列表的顶部。到目前为止，我已经开始工作了。但是，如果我有两个具有相同持续时间的div，则排序功能应该在顶部具有持续时间最短且价格最低的一个。

我如何结合两个这种排序功能？

结果应为：

Duration: 500 - Price: 190
Duration: 500 - Price: 250
Duration: 600 - Price: 100
Duration: 700 - Price: 130

var List__fastest = "";
List__fastest = $("div");
List__fastest.sort(function (a, b) { return $(a).data("duration") - $(b).data("duration") });

$("#result").html(List__fastest);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div data-duration="700" data-price="130">Duration: 700 - Price: 130</div>
<div data-duration="500" data-price="250">Duration: 500 - Price: 250</div>
<div data-duration="600" data-price="100">Duration: 600 - Price: 100</div>
<div data-duration="500" data-price="190">Duration: 500 - Price: 190</div>

<div id="result"></div>

Answer 1

基本上，如果比较要排序的第一件事的结果是它们不相等，则返回该结果；否则，返回比较您要排序的第二件事的结果。您可以使用JavaScript强大的||运算符来做到这一点：

setTimeout(function() {
  var List__fastest = "";
  List__fastest = $("div");
  List__fastest.sort(function (a, b) {
      return $(a).data("duration") - $(b).data("duration") // First by this
          || $(a).data("price") - $(b).data("price");      // Then by this
  });

  $("#result").html(List__fastest);
}, 800);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div data-duration="700" data-price="130">Duration: 700 - Price: 130</div>
<div data-duration="500" data-price="250">Duration: 500 - Price: 250</div>
<div data-duration="600" data-price="100">Duration: 600 - Price: 100</div>
<div data-duration="500" data-price="190">Duration: 500 - Price: 190</div>

<div id="result"></div>

很显然，如果要先按价格排序，然后再按持续时间排序，则可以颠倒比较的顺序。（两种方法都以最低的持续时间和最低的价格为首次。）

jQuery：按两个参数对列表进行排序

1 个答案: