选择一定数量的直接兄弟姐妹w/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个相邻的,但我仍然希望将每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.