选择一定数量的带有jQuery的直接同级 [英] select certain number of immediate siblings w/ jQuery
问题描述
我有多个div,如下所示:
I have multiple divs like this:
<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,就像这样:
I want to select every 4 .small divs to wrap in another div so it's like this:
<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进行分组.
As you can see from the first example, there can be more than 4 adjacent ones, but I still want to group every 4 .small divs.
任何想法将不胜感激.谢谢!
Any idea would be much appreciated. Thanks!
推荐答案
这是我过去的做法.
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()
.
I chunk the selected elements into chunks of a desired length and then call wrapAll()
on the sub-selection.
仅此而已,这就是不使用jQuery的情况...
Just for the hell of it, here is how you'd do it without 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()
的旧浏览器,请将元素选择代码替换为...
Of course, for old browsers that don't support document.querySelectorAll()
or document.getElementsByClassName()
, replace the element selecting code with...
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 .
这篇关于选择一定数量的带有jQuery的直接同级的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!