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

我将所选元素 ch 成所需长度的块，然后在子选择上调用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

选择一定数量的直接兄弟姐妹w / jQuery

2 个答案: