Question

我想要多个具有相同类的DIV元素，并且在加载时，Jquery将能够包装一定数量的那些DIV元素。

示例：

<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>

然后，假设我想用另一个名为childWrapper

的div包装每个4个DIV元素

结果应该是：

<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>

谢谢：）

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>");
    }
}

此功能的参数是每个childWrapper

中所需的div数

演示：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  
    }
});

<强> Working Demo

在X编号Jquery上包裹元素

2 个答案: