Как мне группировать определенное количество элементов с помощью jQuery?

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

Я уверен, что я мог бы получить это без каждый, если я дал ему еще несколько минут, но это работает.

Вот js fiddle

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

Answer 2

Я считаю, что это то, что вы хотите. По существу, вы выполняете цикл до тех пор, пока у вас не будет больше элементов div.quote в div.quoteWrapper. Это используется раствор в :lt() selector

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

Answer 3

@John Хартсок является кратким, но неэффективным из-за того, сколько раз селекторы выполняются. Я хотел бы предложить вариации на его:

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/