选择一定数量的带有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演示