javascript - 使用 Jquery 按子项中存在的编号排序父项

Question

如果我有 ul li，其中 li 中有一个数字，我怎样才能按这个数字对所有 ul 进行排序(大的应该排在第一位)？

例如我有我无法更改的 html

<ul id="ul-list">
    <li>
        <div class="name">product 1</div>
        <div class="rating">85</div>
    </li>
    <li>
        <div class="name">product 2</div>
        <div class="rating">20</div>
   </li>
    <li>

        <div class="name">product 3</div>
        <div class="rating">95</div>
    </li>
</ul>

我想重新排序该列表，因此产品 3 将排在第一个，因为该产品的评分最高，而产品 2 将排在最后一个，因为该产品的评分最低

Answer 1

您可以转换为数组，对该数组进行排序，清空容器，最后添加排序后的元素数组。

var sorted = $('#ul-list li').toArray().sort(function(a, b) {
  var aValue = $(a).find('.rating')[0].textContent;
  var bValue = $(b).find('.rating')[0].textContent;

  return bValue - aValue;
});


$('#ul-list').empty().append(sorted);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ul-list">
    <li>
        <div class="name">product 1</div>
        <div class="rating">85</div>
    </li>
    <li>
    <div class="name">product 2</div>
        <div class="rating">20</div>
    </li>
        
    <li>
      <div class="name">product 3</div>
        <div class="rating">95</div>
    </li>
        
</ul>