将每个 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>

我已经找到了有关此主题的经典方法

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>