基于jQuery中的数据属性对div进行排序

Question

好的，我正在尝试使 jQuery 在单击按钮时对 div 进行排序，

假设列表看起来像这样，

<div class="wrapper">
  <div class="item" data-worth="720">Edgy</div>
  <div class="item" data-worth="420">Blaze</div>
  <div class="item" data-worth="666">Meme</div>
</div>

然后点击按钮后我想让它吐出来，

   <div class="wrapper">
      <div class="item" data-worth="720">Edgy</div>
      <div class="item" data-worth="666">Meme</div>
      <div class="item" data-worth="420">Blaze</div>
    </div>

基本上将价值从低到高排序，重新排列所有东西并将其放回包装纸中。

老实说，我对如何继续这样做一无所知，我想使用 jQuery 的.each功能，但后来我只能在顶部获得最高价值，有什么建议吗？

Answer 1

divs根据其对包装器进行排序data('worth')，然后将排序后的列表附加回包装器：

$('button').click(function() {
  $('.wrapper div').sort(function(a, b) {
    return $(b).data('worth') - $(a).data('worth');
  }).appendTo('.wrapper');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Sort</button>
<div class="wrapper">
  <div class="item" data-worth="720">Edgy</div>
  <div class="item" data-worth="420">Blaze</div>
  <div class="item" data-worth="666">Meme</div>
</div>