根据元素属性重新排序DIV

Question

我不知道该怎么做.假设我有以下HTML代码:

<div id="container">
  <div class="item" order="5"></div>
  <div class="item" order="3"></div>
  <div class="item" order="4"></div>
  <div class="item" order="1"></div>
  <div class="item" order="2"></div>
</div>

使用jQuery,我怎么能根据属性"order"来订购这些div？通过重新排序,我的意思是我希望dom根据属性"order"更新div的顺序.这自然会调整div的z指数.我知道根据属性顺序设置z-index将在浏览器窗口中显示正确的显示,但它不会操纵dom顺序.

我假设我会遍历#container并得到孩子及其顺序如下:

$('#container > div').each( function(event) {
   var itemOrder = $(this).attr('order');
});

......但我对如何操纵订单感到茫然.任何帮助将不胜感激.

Answer 1

你可以这样做 :

$('#container').append($('#container .item').sort(function(a,b){
   return a.getAttribute('order')-b.getAttribute('order');
}));

示范