jquery选择第n个孩子跳过隐藏元素[重复]答案

【问题标题】：jquery selecting nth-child skipping hidden elements [duplicate]jquery选择第n个孩子跳过隐藏元素[重复]
【发布时间】：2013-07-17 23:27:04
【问题描述】：

我有以下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 中可能有一个隐藏的 <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>

【问题讨论】：

看看这个api.jquery.com/visible-selector
你看过 .not() 吗？
:visible 和 :not() 不会影响 :nth-child()。恐怕你将不得不each()你的方式取模4。
您对该选择器如何工作的结论是错误的。它不会选择类产品元素内的每 4 li；它只会选择第 4 里。
@jeff，好的，但我们假设提问者的意思是4n。仍然不会考虑元素可见性。

标签： jquery css-selectors

【解决方案1】：

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

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

很遗憾，您不能在此处使用第 n 个选择器，因为您不想计算隐藏元素。因此您可以迭代项目并每第四个更改一次。

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

【讨论】：

【解决方案2】：

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

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

更新fiddle here

【讨论】：

我投了反对票。这会将类添加到仅第 4 个可见项目，而不是第 8、12、16 ......等等
已修复，介意快速投票吗？ ;)

【解决方案3】：

你可以试试这个：

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

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

【讨论】：

与我给出的答案大致相同。我只想评论说，使用:visible 作为初始选择器的一部分是一项昂贵的操作，你真的应该制作一个基于 CSS 的选择器，然后在其上使用filter() 来确定可见元素。显然，您可以连续链接两个 filter() 调用来实现此目的。
不知道，但是是的，性能方面，你的答案更好！

【解决方案4】：

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

jquery:

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

编辑

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

【讨论】：