我怎样才能获得前4个孩子并将其包装成div?

时间:2011-06-27 09:32:58

标签: jquery jquery-selectors

如何找到父母的前4个孩子并将其包装成div,然后将其包装为4,依此类推?谷歌不知道! :(

FROM:

<div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

TO:

<div lass="main">
    <div class="pack1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>

    <div class="pack1">
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
</div>

任何帮助非常感谢。

我可以通过以下方式找到前4:$('.main > div:lt(4)').wrapAll('<div class="pack1"></div>'); 但是如何获得每一个4 ??

皮特

2 个答案:

答案 0 :(得分:6)

不是最优雅的方式,但它的工作。

var sel;
while ( (sel = $('.main > div:not(.pack1)')).length > 0 )
{
    sel.slice(0,4).wrapAll('<div class="pack1"></div>');
}

这是fiddle

更新

这里有班级的柜台。我们必须使用第二类pack来排除所有打包的div。

var sel;
var count = 1;
while ( (sel = $('.main > div:not(.pack)')).length > 0 )
{
    sel.slice(0,4).wrapAll('<div class="pack pack'+ count++ +'"></div>');
}

fiddle

或者我们选择

var sel;
var count = 1;
while ( (sel = $('.main > div:not([class^="pack"])')).length > 0 )
{
    sel.slice(0,4).wrapAll('<div class="pack'+ count++ +'"></div>');
}

fiddle

答案 1 :(得分:0)

这只是一个想法(我不确定我是否正确编码),但你可以使用这种方法。

   var first = $(".main div:lt(4)");
    $(".main div:lt(4)").remove();
    var second = $(".main div:lt(4)");
    $(".main div:lt(4)").remove();

    $(".main").append("<div class=pack1>" + first+ "</div>");
    $(".main").append("<div class=pack2>" + second+ "</div>");