1

次のコードがある場合:

<div class="parent">

    <div class="1a"></div>
    <div class="1b"></div>

    <div class="2a"></div>
    <div class="2b"></div>

    <div class="3a"></div>
    <div class="3b"></div>


</div>

新しい div を各 a + b にラップする効率的で簡単な方法はありますか?

<div class="parent">

   <div class="new-1">        
       <div class="1a"></div>
       <div class="1b"></div>
   </div>

   <div class="new-2">        
       <div class="2a"></div>
       <div class="2b"></div>
   </div>

   <div class="new-3">        
       <div class="3a"></div>
       <div class="3b"></div>
   </div>


</div>

たとえば、次のように言えますか。

.parent 内の 2 つの div ごとにラップします<div class="new-(incremental variable)"></div>(新しいラッピング div には一意のクラスが必要です)

4

3 に答える 3

6

このような？

$('.parent > div:odd').each(function(i){
    $(this)
       .prev()
       .addBack()
       .wrapAll($('<div/>',{'class': 'new-' + (i+1)}));
});

デモ

インデックス (0 ベース) に基づいて、1、3、5 などの奇数を選択します。奇数のものを反復して、奇数（ペアにする必要がある）に関連する前の要素を取得し、andSelf addBackを使用して それも選択し、ペアでwrapAllを使用します。

それらの最初の x を無視する場合は、次のようにします。

$('.parent > div:gt(' + (x-1) + '):odd').each(function(i){
    $(this)
         .prev()
         .addBack()
         .wrapAll($('<div/>',{'class': 'new-' + (i+1)}));
})

デモ

于 2013-07-01T22:10:17.287 に答える
0

新しいラッパー div で何を達成したいかはわかりませんが、CSS の nth-child が役立つ場合があります。次のようなことを試してください：

div.parent div {width:50%;}
div.parent div:nth-child(odd) {clear:both; float:left;}
div.parent div:nth-child(even) {float:right;}

...これにより、div のペアが並んで表示されます。

于 2013-07-01T22:25:09.697 に答える
0

文字通りjQueries Wrap関数を使用できます。ここを見てください！

http://api.jquery.com/wrap/

于 2013-07-01T22:10:57.173 に答える