如何根据数据属性对父 div 中的子 div 进行排序？

Question

我正在尝试使用 jQuery 在父 div 中对子 divs 进行排序，但是我的代码根本不起作用。我的意图是按升序对子 div 元素进行排序。目前，我的模板结构是：

我正在使用此函数根据data-year 属性对子divs 进行排序：

$(function() {

  $('.year').on('click', function(e) {
    e.preventDefault();
    $('#parent').find('.child').sort(function(a, b) {
      var contentA = parseInt($(a).attr('data-year'));
      var contentB = parseInt($(b).attr('data-year'));
      return (contentA > contentB) ? -1 : (contentA < contentB) ? 1 : 0;
    }).appendTo('#parent');
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="btn btn-sm dropdown-toggle" type="button" id="d_li" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Sort By
          </button>
  <div class="dropdown-menu mt-1" aria-labelledby="d_li">
    <button class="small dropdown-item newest" type="button">Newest</button>
    <button class="small dropdown-item name">Name</button>
    <button class="small dropdown-item year" type="button">Year</button>
  </div>
</div>

<div id="parent">
  <div class="child" data-year="2010" data-ins="2">year 2010, ins 2</div>
  <div class="child" data-year="2000" data-ins="3">year 2000, ins 3</div>
  <div class="child" data-year="2020" data-ins="1">year 2020, ins 1</div>
</div>

点击 year 按钮后没有任何变化，我做错了什么？

Answer 1

您需要在排序函数中交换运算符> 和<。

$(function() {

  $('.year').on('click', function(e) {
    e.preventDefault();
    $('#parent').find('.child').sort(function(a, b) {
      var contentA = parseInt($(a).attr('data-year'));
      var contentB = parseInt($(b).attr('data-year'));
      return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
    }).appendTo('#parent');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="btn btn-sm dropdown-toggle" type="button" id="d_li" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Sort By
          </button>
  <div class="dropdown-menu mt-1" aria-labelledby="d_li">
    <button class="small dropdown-item newest" type="button">Newest</button>
    <button class="small dropdown-item name">Name</button>
    <button class="small dropdown-item year" type="button">Year</button>
  </div>
</div>

<div id="parent">
  <div class="child" data-year="2010" data-ins="2">year 2010, ins 2</div>
  <div class="child" data-year="2000" data-ins="3">year 2000, ins 3</div>
  <div class="child" data-year="2020" data-ins="1">year 2020, ins 1</div>
</div>

Answer 2

实际上，如果您查看 sort() 文档。您会发现不需要三元，小于或大于操作或其他任何东西。如果您正在寻找对数组进行排序（或者在特定情况下类似数组的元素，如 HTML 集合），您应该始终考虑以下两个语句：

如果compareFunction(a, b) 返回小于0，则将a 排序到低于b 的索引（即a 排在第一位）。

如果compareFunction(a, b) 返回大于0，则将b 排序到低于a 的索引（即b 排在第一位）。

注意：在您的情况下，compareFunction 是 function(a, b){...}。

所以你只需要坚持第一条语句并从a 中减去b 即可。

那么你的最终代码应该是这样的：

$(function() {

  $('.year').on('click', function(e) {
    e.preventDefault();
    $('#parent').find('.child').sort(function(a, b) {
      var contentA = parseInt($(a).attr('data-year'));
      var contentB = parseInt($(b).attr('data-year'));
      return contentA - contentB
    }).appendTo('#parent');
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="btn btn-sm dropdown-toggle" type="button" id="d_li" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Sort By
          </button>
  <div class="dropdown-menu mt-1" aria-labelledby="d_li">
    <button class="small dropdown-item newest" type="button">Newest</button>
    <button class="small dropdown-item name">Name</button>
    <button class="small dropdown-item year" type="button">Year</button>
  </div>
</div>

<div id="parent">
  <div class="child" data-year="2010" data-ins="2">year 2010, ins 2</div>
  <div class="child" data-year="2000" data-ins="3">year 2000, ins 3</div>
  <div class="child" data-year="2020" data-ins="1">year 2020, ins 1</div>
</div>