javascript - 按多个数据属性对 div 进行排序

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);
}

标签： javascriptjquery

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>