選擇一定數量的直接相鄰的兄弟/ w的jQuery的

我有多個div像這樣：選擇一定數量的直接相鄰的兄弟/ w的jQuery的

<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個小單元分組。

任何想法將不勝感激。謝謝！

來源

2012-03-08 claras

你必須讓像你的「大」之外的其它要素可能是例子在這之間，一組4個「小」組可能會重疊「大」？ – nnnnnn 2012-03-08 03:13:23

這是我過去如何做到的。

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。

來源

2012-03-08 03:11:32 alex

這工作得很好！謝謝！！ – claras 2012-03-14 03:11:15

您使用slice或gt()和lt() 見下

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

或者

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

jsfiddle demo

來源

2012-03-08 03:24:10 Dips

選擇一定數量的直接相鄰的兄弟/ w的jQuery的

回答

相關問題