This question already has an answer here:
jquery nth child that is currently visible
(1个答案)
6年前关闭。
我有以下html结构:
我有以下jQuery:
如您所见,以上代码将为每4个
但是在我的HTML中,通过jquery使用
有没有办法跳过隐藏的元素?因此,从理论上讲,我应该具有以下几点:
不幸的是,您不能在这里使用第n个选择器,因为您不想计算隐藏的元素。因此,您可以遍历所有项并每四项更改一次。
(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/