すべてのx要素をdivにラップし、（xラップ後）異なる数の要素をラップします（xラップの場合）

Question

このようなループを作成することは可能ですか？

例えば：、その後、（2ラップ後）

<div id="container"> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
</div> 

<div id="container"> 
<div class="group"> 
<div></div> 
<div></div> 
</div> 
<div class="group"> 
<div></div> 
<div></div> 
</div> 
<div class="group"> 
<div></div> 
<div></div> 
<div></div> 
</div> 
<div class="group"> 
<div></div> 
<div></div> 
<div></div> 
</div> 
<div class="group"> 
<div></div> 
<div></div> 
<div></div> 
</div> 
<div class="group"> 
<div></div> 
<div></div> 
</div> 
<div class="group"> 
<div></div> 
<div></div> 
</div> 
</div> 

に（3ラップのために）すべての3つのdivをラップのdivの中にすべての2つのdivをラップ私はすでに発見しました従来の方法について this topic

var divs = $("div > div"); 
for(var i = 0; i < divs.length; i+=3) { 
    divs.slice(i, i+3).wrapAll("<div class='new'></div>"); 
} 

どのようなアイデアですか？

（私はそれが間違って取得する場合、私はとても残念初心者です）

Answer 1

i += stepのようなステップは、変数2であるべきであり、あなたが各反復でそれをインクリメントする必要があります

var divs = $("div > div"); 
 
var step = 1; // the step 
 
for (var i = 0; i < divs.length; i += step) { // increment i with the step 
 
    divs.slice(i, i + step + 1).wrapAll("<div class='group'></div>"); // slice for i to i + step + 1 and wrap 
 
    step++; // increment the step 
 
}

.group:nth-child(even) { 
 
    background: lightblue; 
 
} 
 

 
.group:nth-child(odd) { 
 
    background: lightgrey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
    <div>7</div> 
 
    <div>8</div> 
 
    <div>9</div> 
 
    <div>10</div> 
 
    <div>11</div> 
 
    <div>12</div> 
 
    <div>13</div> 
 
    <div>14</div> 
 
    <div>15</div> 
 
    <div>16</div> 
 
    <div>17</div> 
 
</div>