Question

如何按两个数据属性排序？首先，我需要按discount排序，然后按weight排序。

<div id="list">
    <div class="row" data-weight="1" data-discount=0>banana</div>
    <div class="row" data-weight="3" data-discount=30>apple</div>
    <div class="row" data-weight="4" data-discount=0>avocado</div>
    <div class="row" data-weight="8" data-discount=15>milk</div>
</div>

function sortOrder(){
  divList.sort(function(a, b){ 
    return $(b).data("order")-$(a).data("order")
  });
  $(".list").html(divList);
}

Answer 1

您当前的sort()逻辑说明了如何针对单个属性执行此操作。对于多个属性，您只需要修改逻辑以适应值相同的情况，如下所示。

请注意，此逻辑可以简化一些，但我以这种方式保留了它，以使流程更加明显。

var $divList = $('#list .row');

function sortOrder() {
  $divList.sort(function(a, b) {
    var $a = $(a), $b = $(b);
    
    if ($a.data('discount') < $b.data('discount')) {
      return 1;
    } else if ($a.data('discount') > $b.data('discount')) {
      return -1;
    }
    
    if ($a.data('weight') < $b.data('weight')) {
      return 1;
    } else if ($a.data('weight') > $b.data('weight')) {
      return -1;
    }
    
    return 0;
  });

  $("#list").append($divList);
}

sortOrder();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">
  <div class="row" data-weight="1" data-discount=0>banana</div>
  <div class="row" data-weight="3" data-discount=30>apple</div>
  <div class="row" data-weight="4" data-discount=0>avocado</div>
  <div class="row" data-weight="8" data-discount=15>milk</div>
</div>

按多个数据属性对div排序

1 个答案: