基于<p>(段落标记)之一对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);