divでコンテナの部分を動的にラップする

Question

DOM操作とjQueryの基本的な経験はありますが、既存のコンテナ内に新しいdivコンテナを3番目と最後のdivに挿入する方法を理解しようとしています。お子様の数はdivです。私はnth-childセレクタを使用すると思いますが、それ以上は得られません。私は手動で新しいコンテナを追加しますが、子のdivはページのロード時に生成されます。ありがとう！

既存の構造：

<div id="primary-cont"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

所望の構造：

<div id="primary-cont"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div id="secondary-cont"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    </div> 
</div> 

Answer 1

はいn番目の子は、ページ上のjQueryを使用している場合は、これを行うための正しい方法は、ここで私は何をするのかされています：

$('#primary-count .child:nth-child(n+4)').wrapAll("<div id='secondary-cont'></div>"); 

これはどのように機能しますか？

＃primary-count divとし、その中の.childはその中でチャイルドになります。それ以降は単純に4となります。

しかし、ページ上のコンテンツをどのように取得するかによって、これを行う最良の方法ではない場合があります。ループを使用してdivあなたはこれらの線に沿って何かを使用することができますたとえば

：

$count = 1; 
foreach($children as $child) 
{ 
    if ($count%4 == 1) 
    { 
     echo "<div>"; 
    } 
    echo $kicks->brand; 
    if ($count%4 == 0) 
    { 
     echo "</div>"; 
    } 
    $count++; 
} 
if ($count%4 != 1) echo "</div>"; 

Answer 2

私はアンディの答えに基づいて構築し、私の所望の構造を達成するために.wrapAll()を使用：

$(document).ready(function() { 
    $('#primary-cont .child:nth-child(n+4)').wrapAll('<div id="secondary-cont"></div>'); 
}) 

Answer 3

これを行うには、slice() jQueryメソッドを使用することもできます。

$('#primary-cont div.child').slice(3,6).wrapAll("<div class='secondary-count'></div>");