выберите определенное количество ближайших братьев и сестер w / jQuery

Question

У меня есть несколько делений, как это:

<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>

<div class="large"></div>
<div class="large"></div>

<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>

Я хочу выбрать каждые 4. Малых div для переноса в другой div, так что это выглядит так:

<div class="box">
    <div class="small"></div>
    <div class="small"></div>
    <div class="small"></div>
    <div class="small"></div>
</div>

Как видно из первого примера, может быть более 4 смежных, но я все еще хочу группировать каждые 4 .small div

Любая идея будет высоко ценится. Спасибо!

Answer 1

Вот как я это делал в прошлом.

var smallDivs = $('div.small'),
    chunkLength = 4;

for (var i = 0, length = smallDivs.length; i < length; i += chunkLength) {
    smallDivs.slice(i, i + chunkLength).wrapAll('<div class="box" />');
}​

jsFiddle .

I chunk выделенные элементы на куски желаемой длины, а затем вызовите wrapAll() для подвыбора.

Просто, черт возьми, вот как бы вы сделали это без jQuery ...

var smallDivs = document.querySelectorAll('div.small'),
    chunkLength = 4,
    box;

for (var i = 0, length = smallDivs.length; i < length; i++) {
    if (!(i % chunkLength)) {
        box = document.createElement('div');
        box.className = 'box';
        smallDivs[i].parentNode.appendChild(box);
    }

    box.appendChild(smallDivs[i]);

}​

jsFiddle .

Конечно, для старых браузеров, которые не поддерживают document.querySelectorAll() или document.getElementsByClassName(), замените код выбора элемента на ...

var divs = document.getElementsByTagName('div'),
    smallDivs = [];

for (var i = 0, length = divs.length; i < length; i++) {
    if ((' ' + divs[i].className + ' ').indexOf(' small ') >= 0) {
        smallDivs.push(divs[i]);
    }
}

jsFiddle .

Answer 2

Вы используете slice или gt() и lt() См. Пример ниже

$(".small").slice(4,10).wrapAll('<div class"smallWrapper"></div>');

Или

$(".small:gt(5):lt(10)").wrapAll('<div class"smallWrapper">

jsfiddle demo