围绕每三个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,我想用每个3包装<div class="parent"></div>.所以它会呈现为:

<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