This question already has an answer here:
jquery nth child that is currently visible

(1个答案)


6年前关闭。




我有以下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>添加一个last类。

但是在我的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>

最佳答案

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

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


不幸的是,您不能在这里使用第n个选择器,因为您不想计算隐藏的元素。因此,您可以遍历所有项并每四项更改一次。

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

关于jquery - jQuery选择第n个子项跳过隐藏元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17711993/

10-11 23:28
查看更多