将元素包装在新的 div 中答案

【问题标题】：wrapping elements in a new div将元素包装在新的 div 中
【发布时间】：2011-02-08 05:47:56
【问题描述】：

我有以下html：


<div id="one">
    <div class="two">
        <div class="entry">
        Content here
        </div>
        <div class="entry">
        Content here
        </div>
        <div class="entry">
        Content here
        </div>
        <div class="entry">
        Content here
        </div>
        <div class="entry">
        Content here
        </div>
        <div class="entry">
        Content here
        </div>
        <div class="entry">
        Content here
        </div>
        <div class="entry">
        Content here
        </div>
        <div class="entry">
        Content here
        </div>
    </div>
</div>

在 jQuery 中，如果我要将每 3 个元素包装在一个新的 div 中，如下所示，我该怎么做？


<div id="one">
    <div class="two">
        <div>
            <div class="entry">
            Content here
            </div>
            <div class="entry">
            Content here
            </div>
            <div class="entry">
            Content here
            </div>
        </div>
        </div>
            <div class="entry">
            Content here
            </div>
            <div class="entry">
            Content here
            </div>
            <div class="entry">
            Content here
            </div>
        </div>
        <div>
            <div class="entry">
            Content here
            </div>
            <div class="entry">
            Content here
            </div>
            <div class="entry">
            Content here
            </div>
        </div>
    </div>
</div>

我尝试了切片和包装，但这并没有真正帮助我。有任何想法吗？感谢您在这方面的帮助。

谢谢，大号

【问题讨论】：

标签： jquery-selectors

【解决方案1】：

var entries = $('#one > .two > div.entry');

entries.each(function(i) {
    if( i % 3 == 0 ) entries.slice(i,i+3).wrapAll('<div>');
});

http://jsfiddle.net/PZkSL/

【讨论】：

RightSaidFred：非常感谢您的帮助 :)

【解决方案2】：

请参阅此How to wrap every 3 child divs with html using jquery? 或Wrap every 3 divs in a div

【讨论】：

【解决方案3】：

如何获取类“two”的 div 元素，并遍历它的子元素。当你找到第一个孩子使用 $(firstChild).before('<div>');并在第三个孩子上使用 $(thirdChild).after('</div>');只需使用此方法一直迭代即可。没有使用 .before() 或 .after() 所以不确定这将如何实现。祝你好运。

【讨论】：

【解决方案4】：

我只想写一个简单的for 循环，类似于：

var two = $(".two");
var elements = $(".entry");
var group = [];
for(var i=0;i<elements.length;i++) {
  var mod = i % 3;
  if(mod == 0 && group.length > 0) {
    var container = $('<div></div>');
    two.append(container);
    for(var j=0;j<group.length;j++) {
      container[0].appendChild(group[j]);
    }
    group = [];
  }
  group[mod] = elements[i];
}

【讨论】：