jquery选择nth-child跳过隐藏元素

Question

我有以下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");

正如您所看到的,上面将添加一个最后一个类到每4个<li>.

但是在我的HTML中可能存在隐藏的<li>使用display:none;通过jquery.

有没有办法跳过隐藏的元素？所以理论上我应该有以下几点:

<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>

Answer 1

您可以简单地限制您的选择以排除隐藏的项目:

$('.products li').filter(':visible');

不幸的是,你不能在这里使用第n个选择器,因为你不想计算隐藏的元素.所以你可以迭代这些项目并改变每一个项目.

$('.products li').filter(':visible').each(function(i) {
    var modulus = (i + 1) % 4;
    if (modulus === 0) { 
        $(this).addClass('last');
    }
});