2

私は次のhtml構造を持っています:

<ul class="products">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>

私は次のjqueryを持っています:

$(".products li:nth-child(4)").addClass("last");

ご覧のとおり、上記は last のクラスを 4th ごとに追加し<li>ます。

ただし、私の HTML では、jquery<li>を使用して非表示になっている可能性があります。display:none;

非表示の要素をスキップする方法はありますか? したがって、理論的には、次のものが必要です。

<ul class="products">
<li><a href="#"></a></li>
<li style="display:none;"><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li class="last"><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li class="last"><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
4

4 に答える 4

3

ロレンツォの解決策とともに、n番目の子のセレクターを使用する代わりにインデックスを使用してみてください。

$('li:visible').each(function(i){
    if((i+1) % 4 == 0){
        $(this).addClass('temp');
    }
});

ここで更新されたフィドル

于 2013-07-17T23:32:12.437 に答える