jquery - Wrap Elements on X number Jquery

Question

I want numbers of DIV elements with the same classes, and on load, Jquery will be able to wrap certain number of those DIV elements.

Example:

<div class="wrapper">

    <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>
    <div class="child"></div>

</div>

Then let say i want to wrap every 4 DIV elements with another div called childWrapper

Result should be:

<div class="wrapper">

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

</div>

Thanks :)

Answer 1

这可以解决问题：

function wrapDivs(number) {
    var divs = $("div.wrapper > div.child");
    for(var i = 0; i < divs.length; i+=number) {
        divs.slice(i, i+number).wrapAll("<div class='childWrapper'></div>");
    }
}

这个函数的参数是你想要的每个 div 的数量childWrapper

演示：http: //jsfiddle.net/tymeJV/eqFQF/2/

Answer 2

要将每 4 个元素包装到另一个容器中，您可以执行以下操作。

// for every direct .child inside .wrapper
$(".wrapper > .child").each(function(i) {
    var $this = $(this);
    if(i % 4 == 0) { // if boundary element
        $('<div class="wrap2" />')
            .append($this.nextUntil(':eq('+(i+3)+')')) // append next 3 into the interim wrapper
            .prepend($this).appendTo('.wrapper'); // prepend this element  
    }
});

工作演示