Question

考虑一下我们：

<div class "parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  // And Even More....
</div>

我需要将每个3个或更少（2,1）元素包装到ONE 中，而我不知道子节点的数量。我需要的结果是：

<div class "parent">
  <div class "middle">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
  <div class "middle">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
  <div class "middle">
    <div class="child"></div>
  </div>
  // And Even More....
</div>

如何使用.wrapAll()或任何其他方法来执行此操作？

问题的一个更好的版本是：如何选择div的3乘3？正如this帖子所示，如何包装它们。

Answer 1

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

Answer 2

始终尝试将总元素变为变量。 .length值保持不变，每次迭代都不会改变。

 var childs = $("div.parent").children();
 var totElements = childs.length;
 var i = -3;

 while( (i += 3) < totElements)
     childs.slice(i,i+3).wrapAll( "<div class='middle' />");

将每个三个div包装为一个

2 个答案: