围绕每三个div包含一个div

Question

假设我有6个子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>

使用jQuery，我想用<div class="parent"></div>包装每一组3。所以它会呈现为：

<div class="parent">
     <div class="child"></div>
     <div class="child"></div>
     <div class="child"></div>
</div>
<div class="parent">
     <div class="child"></div>
     <div class="child"></div>
     <div class="child"></div>
</div>

最简单的方法是什么？

Answer 1

哇，好挑战的问题=）

while(($children = $(':not(.parent)>.child:lt(3)')).length) {
    $children
        .parent()
        .append(
            $('<div class="parent"></div>')
                .append($children.remove())
    );
}

编辑：不知道wrapAll方法，所以：

while(($children = $(':not(.parent)>.child:lt(3)')).length) {
    $children.wrapAll($('<div class="parent"></div>'));
}

Answer 2

这应该这样做：

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

DEMO

Answer 3

我写了一个小插件，我在这样的场景中使用它。它需要一个集合，并将其拆分为x的块（其中x是每个块的大小）：

$.fn.chunk = function( cLen ) {
    var chunks = [];
    while ( this.length ) {
        chunks.push( this.splice(0, cLen) );
    }
    return $(chunks);
};

然后可以像这样使用：

$('.child').chunk(3).each(function() {
  $(this).wrapAll('<div class="parent">');
});

Here's a fiddle

或者，作为此目的的插件：

$.fn.wrapEvery = function( cLen, wrapperEl ) {
    while ( this.length ) {
        $( this.splice(0, cLen) ).wrapAll( wrapperEl );
    }
};

可以这样使用：

$('.child').wrapEvery(3, '<div class="parent">');

Here's another fiddle