【问题标题】：How can I get first 4 of the childrens and wrap it into the div?我怎样才能得到前 4 个孩子并将其包装到 div 中？
【发布时间】：2011-06-27 18:15:10
【问题描述】：

如何找到父级的前 4 个子级并将其包装到 div 中，然后是下一个 4 个，依此类推？谷歌不知道！ :(

来自：

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

到：

<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 个呢？？

皮特

【问题讨论】：

标签： jquery jquery-selectors

【解决方案1】：

不是最优雅的方式，但它的工作原理。

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 为那个。

【讨论】：

在他的例子中，他对两个组都使用了“pack1”，所以我没有故意添加计数器;-)
@DanielB - (+1) 增加将是完美的！
@Pete，这使它有点复杂，因为选择了:not(class)。我会更新的
@DanielB - 这是我正在尝试做的事情jsfiddle.net/MrTest/NAL8E - 过滤器+分页。目前我的分页正在重置我的过滤（隐藏所有 div）。只是想，会更容易按顺序找到可见的 div，例如表格 0-4、4-8 等。你怎么看？请注意，在这个阶段分页不起作用！
@DanielB 简单的隐藏/显示不适用于过滤和分页 - 需要使用某些类 .with-filter - 你怎么看？

【解决方案2】：

这只是一个想法（我不确定我的编码是否正确），但您可以使用这种方法。

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

【讨论】：