Question

我需要一些关于使用jQuery选择项目的快速帮助。这可能是一个非常简单的解决方案，但是...除了克隆和复制元素之外，我看不到一个正确的解决方案。所以，我们走了。我在页面上有这种结构：

http://content.screencast.com/users/iamntz/folders/Jing/media/2fa05c60-f4fc-4178-b9b6-187831e1ca31/2010-11-22_1741.png

我想将每个六个元素分组到一个包装元素中，以便拥有.quotesWrapper > (.sixQuoteWrapper > .quote * 6) * 4。

知道我怎么能做到这一点？谢谢！

Answer 1

@John Hartsock的解决方案简洁但效率低，因为选择器运行的次数很多。我会建议他的变种：

var i = 0, 
    quotes = $("div.quoteWrapper").children(),
    group;

while ((group = quotes.slice(i, i += 6)).length) {
    group.wrapAll('<div class="sixQuoteWrapper"></div>');
}

此解决方案只运行一次较短的选择器并检索子项，使其更快。

工作演示：http://jsfiddle.net/AndyE/FFf6z/

Answer 2

我确信如果我再给它几分钟，我就可以得到这个，但是这样可行。

这是js fiddle

$('.quotesWrapper .quote.split').each(function(){
    $(this).nextUntil('.quote.split')
        .andSelf()
        .wrapAll('<div class="wrap" />')
});

Answer 3

我相信这就是你想要的。基本上你循环，直到div.quote Wrapper下没有更多div.quote项目。这是使用:lt() selector

while ($("div.quoteWrapper > div.quote").length) {
  $("div.quoteWrapper > div.quote:lt(6)").wrapAll('<div class="sixQuoteWrapper"></div>');
}

如何使用jQuery对一定数量的元素进行分组？

3 个答案: