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>通过jquery使用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>

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

Answer 2

也许您可以尝试使用索引而不是使用第n个孩子的选择器以及lorenzos解决方案？

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

更新fiddle here

Answer 3

你可以试试这个：

$('.products li:visible').filter(function(index){
    return !((index+1) % 4);
}).addClass('last')

小提琴：http://jsfiddle.net/egQp7/

Answer 4

您可以让第一个选择器只选择可见元素，然后使用jquery each()函数的索引进行一些快速数学运算并查找每个第4个元素。 A working example.

jquery的：

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

修改

拿出一个不必要的逻辑运算符。

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

4 个答案:

修改