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>

将每个x元素包装成div，然后（在x换行后）包装不同数量的元素（用于x换行）

1 个答案: