Как сгруппировать определенное количество элементов с помощью 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

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

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 в div.quoteWrapper. Для этого используется селектор : lt ()

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