javascript - 根据其中一个对 jquery div 进行排序（段落标签）

Question

以下是我在模板中的重复 html 结构：

<div class="mystyle" data-id= "11002">
  <div class="style1-header"><h6>Change Status of Task</h6></div>
  <p class="style1-content">Seriously Change Status of Task</p>
  <p class="style2-content" style="visibility:hidden">12</p>
</div>

以上是在我的 html 模板中不断重复的 html 结构。我希望这些东西根据12上面的例子中的数字进行排序。我怎么能用jquery做到这一点。小提琴在这里可用。

Answer 1

使用 JavaScript 的Array.sort方法对 div 数组进行排序。

var $divs = $('div.mystyle').get().sort(function(a,b){
    var aKey = +$(a).find('p.style2-content').text(),
        bKey = +$(b).find('p.style2-content').text();
    return aKey - bKey;
});

然后将现在排序的数组附加到 DOM。

$('body').append($divs);

Answer 2

 var $elements = $("div.mystyle");
 function sortFn(a, b) {
      var aText = $(a).find("p:hidden").text();
      var bText = $(a).find("p:hidden").text();
      return aText > bText ? 0 : 1;
 }

 $elements.sort(sortFn);