將每個x元素換成一個div，然後（在x換行後）換行不同數量的元素（換行x）

Question

是否可以創建這種類型的循環？

例如：每2層的div包裝成一個div，然後（後2套）包裹每3周的div（3套）

<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> 

我已經發現了經典方法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>