選擇一定數量的帶有jQuery的直接同級

Question

我有多個像這樣的div：

<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個.small div包裹在另一個div中，所以像這樣：

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

從第一個示例中可以看到，可以有4個以上的相鄰div，但是我仍然希望每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 。

余塊所選擇的元件為所希望的長度的塊，然后調用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演示