2013-02-08 135 views
2

我無法對列表元素中的元素進行分組。jquery單獨列表元素的每四個子元素包裝

對於excample我有三個列表元素:

<ul class="row"> 
<li class="item"> 
<!-- product name --> 
<div class="imglist"> 
<a href="#" title="image"><span class="txt">txt</span></a> 
</div> 
</li> 
</ul> 

<ul class="row"> 
    <li class="item"> 
    <!-- product name --> 
    <div class="imglist"> 
<a href="#" title="image"><span class="txt">txt</span></a> 
<a href="#" title="image"><span class="txt">txt</span></a> 
<a href="#" title="image"><span class="txt">txt</span></a> 
<a href="#" title="image"><span class="txt">txt</span></a> 
<a href="#" title="image"><span class="txt">txt</span></a> 
<a href="#" title="image"><span class="txt">txt</span></a> 
</div> 
</li> 
</ul> 

<ul class="row"> 
<li class="item"> 
<!-- product name --> 
<div class="imglist"> 
<a href="#" title="image"><span class="txt">txt</span></a> 
<a href="#" title="image"><span class="txt">txt</span></a> 
</div> 
</li> 
</ul> 

jQuery中我嘗試這樣做:

var divs = $("div.imglist > a"); 
for(var i = 0; i < divs.length; i+=4) { 
divs.slice(i, i+4).wrapAll("<div class='group'></div>"); 
} 

但現在的結果是:

<ul class="row"> 
<li class="item"> 
<!-- product name --> 
<div class="imglist"> 
<div class="group"> 
<a href="#" title="image"><span class="txt">txt</span></a> 
<a href="#" title="image"><span class="txt">txt</span></a> 
<a href="#" title="image"><span class="txt">txt</span></a> 
<a href="#" title="image"><span class="txt">txt</span></a></div> 
</div> 
</li> 

<li class="item"> 
<!-- product name --> 
<div class="imglist"> 
<div class="group"> 
<a href="#" title="image"><span class="txt">txt</span></a> 
<a href="#" title="image"><span class="txt">txt</span></a> 
<a href="#" title="image"><span class="txt">txt</span></a> 
<a href="#" title="image"><span class="txt">txt</span></a></div> 
</div> 
</li> 

<li class="item"> 
<!-- product name --> 
<div class="imglist"> 
<div class="group"> 
<a href="#" title="image"><span class="txt">txt</span></a></div> 
</div> 
</li> 
</ul> 

我的問題是,我想單獨打包每個li.item

回答

2

迭代通過單獨的每個列表:

$('.imglist').each(function(){ 
    var divs = $('a', this); 
    console.log(divs) 
    console.log(divs.slice(0,4)); 
    for(var i = 0; i < divs.length; i+=4) { 
     console.log(i) 
     divs.slice(i, i+4).wrapAll('<div class="wrapper"></div>'); 
    } 
}); 

演示:Fiddle

+0

非常感謝 – eyeonu 2013-02-12 12:38:25

1

如果我理解正確的話,你希望每個li.item分組:

$("ul li.item").each(function() { 
    $(this).find("a").wrapall("<div class='group'></div>"); 
}); 
+1

這是如何化妝4組? – 2013-02-08 13:08:02

+0

非常感謝,很有效 – eyeonu 2013-02-12 12:39:00

相關問題