javascript - 将每个 x 元素包装成一个 div，然后（在 x wrap 之后）包装不同数量的元素（对于 x wrap）

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>