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 中，可能会隐藏<li>使用display:none;via 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>
4

4 回答 4

9

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

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

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

$('.products li').filter(':visible').each(function(i) {
    var modulus = (i + 1) % 4;
    if (modulus === 0) { 
        $(this).addClass('last');
    }
});
于 2013-07-17T23:35:24.877 回答
3

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

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

更新的小提琴在这里

于 2013-07-17T23:32:12.437 回答
2

你可以试试这个：

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

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

于 2013-07-17T23:33:45.027 回答
0

您可以使您的第一个选择器仅选择可见元素，然后使用 jqueryeach()函数的索引进行一些快速数学运算并找到每 4 个元素。一个工作示例。

jQuery：

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

编辑

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

于 2013-07-17T23:51:48.067 回答