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 做到这一点。 fiddle is available here.

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