3

これを行う方法がわかりません。次の 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を使用して、属性「注文」に基づいてこれらのdivを注文するにはどうすればよいですか? 並べ替えとは、「順序」属性に基づいて dom が div の順序を更新することを意味します。これにより、div の z-index も自然に調整されます。属性の順序に基づいて z-index を設定すると、ブラウザ ウィンドウに正しく表示されることはわかっていますが、dom の順序は操作されません。

#container をループして、子とその順序を次のように取得するとします。

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

...しかし、注文を操作する方法に途方に暮れています。どんな助けでも大歓迎です。

4

5 に答える 5

10

あなたはこれを行うことができます ：

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

デモンストレーション

于 2013-09-13T11:35:10.880 に答える
1 
$('#container > div').each( function(event) {
    $(this).css('z-index', $(this).attr('order'));
});
于 2013-09-13T11:35:37.723 に答える
0

私はあなたがこれを望んでいると思います:DEMO

 $('#container > div').sortElements(function(a, b){
    return parseInt($(a).attr('order')) > parseInt($(b).attr('order')) ? 1 : -1;
});
于 2013-09-13T11:46:51.297 に答える
-1

ここを見てみてください。基本原理を理解するのに役立ちます。http://james.padolsey.com/javascript/sorting-elements-with-jquery/

于 2013-09-13T11:38:20.003 に答える