我有一个由H3标签预装的元素(div)列表
<h3></h3>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<h3></h3>
<div class="item"></div>
<div class="item"></div>
等...
使用jQuery,我想将每3个div(或更少)分组,然后按每个h3分组:
<h3></h3>
<div class=row>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class=row>
<div class="item"></div>
</div>
<h3></h3>
<div class=row>
<div class="item"></div>
<div class="item"></div>
</div>
我尝试了这里提出的解决方案:Insert <div> for every 5 elements using Javascript 但它显然将所有div组合在一起。 我也试过使用〜选择器没有任何成功:
var a = $('h3 ~ div.item');
for( var i = 0; i < a.length; i+=3 ) {
a.slice(i, i+3).wrapAll('<div class="row"></div>');
}
任何帮助都将受到高度赞赏。
答案 0 :(得分:4)
我最终得到了这个并且它正在运作
$(function(){
var h3=$('h3');
h3.each(function(){
var divs=$(this).nextUntil('h3');
var row_wreapper=$('<div></div>');
while(divs.length)
{
var grp=divs.splice(0, 3);
var row=$('<div class="row"></div>');
$(grp).each(function(){
row.append($(this));
});
row_wreapper.append(row);
}
$(this).after(row_wreapper.html());
});
});
或者
$(function(){
var h3=$('h3');
h3.each(function(){
var divs=$(this).nextUntil('h3');
var row_wreapper=$('<div></div>');
while(divs.length)
{
var grp=divs.splice(0, 3);
var row=$(grp).wrapAll('<div class="row"></div>');
if(row.children().length) row_wreapper.append(row);
}
$(this).after(row_wreapper.html());
});
});
答案 1 :(得分:2)
There is a plugin here that I use when I want to wrap, just because it's clean and allows me to do amazing things。 || You can find the source for the wrapper in plain-text here
唯一的问题是 - 由于你的DOM,我们必须对所有项进行一些结构化并对它们进行分组,然后再迭代这些列表。
我们首先通过 - &gt;
执行此操作$.each($('h3'), function(i,v){
$(v).nextUntil($('h3')).wrapAll('<div class="row-container"></div>');
});
.nextUntil()
是jQuery 1.6+,所以希望没有限制。
现在,通过我上面链接的插件,我们可以引用它并让它在每个新的row-container
中包装对象。
$.each($('.row-container'), function(i,v){
$(v).nwrapper({
wrapEvery : 3,
defaultClasses : false,
extraClasses: ['row']
});
});
答案 2 :(得分:2)
试试这个。一个简单的解决方案..
var h3s = $('h3'); // caching all h3 tags
// looping over h3 tags
$.each(h3s, function(i, hs) {
// selecting div.item between two h3
// for example
// div.item between this (current h3) and h3:eq(1) (next h3) and so on
var divs = $(this).nextUntil($('h3').eq(i+1), 'div.item');
// looping with divs
$.each(divs, function(i, el) {
// checking for div.item
// to group for wrapping
if(i % 3 == 0) {
divs.slice(i , i+3).wrapAll('<div class="row">');
}
});
});
<强> Working sample 强>
相关参考:
答案 3 :(得分:1)
你可以这样做:
(function(c, h, s, $g, n) {
$(c).find([h,s].join()).each(function() {
if ($(this).filter(h).length || $g.find(s).length == n) {
$g = $g.clone().empty().insertAfter(this);
}
$g.append($(this).not(h));
});
})(document, 'h3', '.item', $('<div class="itemGroup"/>'), 3);
如果您的元素包含在特定容器中,则传递容器的选择器(例如“#myContainer”)而不是document
。
<强> DEMO 强>