[英]select certain number of immediate siblings w/ jQuery
I have multiple divs like this: 我有多个像这样的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>
I want to select every 4 .small divs to wrap in another div so it's like this: 我想选择每4个.small div包裹在另一个div中,所以像这样:
<div class="box">
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
</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. 从第一个示例中可以看到,可以有4个以上的相邻div,但是我仍然希望每4个.small div进行分组。
Any idea would be much appreciated. 任何想法将不胜感激。 Thanks!
谢谢!
Here is how I've done it in the past. 这是我过去的做法。
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" />');
}
I chunk the selected elements into chunks of a desired length and then call wrapAll()
on the sub-selection. 余块所选择的元件为所希望的长度的块,然后调用
wrapAll()
在子选择。
Just for the hell of it, here is how you'd do it without jQuery... 只是为了它的地狱,这是没有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]);
}
Of course, for old browsers that don't support document.querySelectorAll()
or document.getElementsByClassName()
, replace the element selecting code with... 当然,对于不支持
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]);
}
}
You use slice
or gt()
and lt()
See example below 您使用
slice
或gt()
和lt()
参见下面的示例
$(".small").slice(4,10).wrapAll('<div class"smallWrapper"></div>');
Or 要么
$(".small:gt(5):lt(10)").wrapAll('<div class"smallWrapper">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.