Как я могу получить первые 4 детей и обернуть их в div?

Question

Как я могу найти первых 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 ??

Пит

Answer 1

Не самый элегантный способ, но работает.

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

Здесь скрипка .

Обновление

Здесь со счетчиком для класса. Мы должны использовать 2-й класс 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>');
}

И скрипка

Или мы идем с

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

скрипка для этого.

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