2

リスト要素内の要素をグループ化するのに問題があります。

たとえば、次の 3 つのリスト要素があります。

<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個別にラッピングが必要なことです。

4

2 に答える 2

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>');
    }
});

デモ:フィドル

于 2013-02-08T13:17:59.603 に答える
1

私があなたを正しく理解しているなら、あなたは各li.itemのグループ化が必要です：

$("ul li.item").each(function() {
    $(this).find("a").wrapall("<div class='group'></div>");
});
于 2013-02-08T13:05:51.893 に答える