【问题标题】：nth-child among hidden children隐藏孩子中的第n个孩子
【发布时间】：2012-07-07 13:30:55
【问题描述】：

我有许多元素（兄弟），它们可能被隐藏也可能不被隐藏（应用了“is-hidden”类）。

我想根据其索引选择其中一个元素，因此使用 :nth-child 伪类。

但是，我想选择第 n 个可见子元素，而不是所有元素的第 n 个子元素。所以我尝试了类似的方法：

$('.product-cell'):not('is-hidden'):nth-child(2);

但这不起作用，是我弄乱了我的语法还是不可能像这样堆叠伪类？我该如何解决这个问题？

【问题讨论】：

对不起，今天下午很累。以至于我无法从 CSS 中分辨出 jQuery :) 使用 jQuery 解决了问题并重建了我的解决方案的其他部分。还是谢谢！

标签： jquery jquery-selectors

【解决方案1】：

但这不起作用，是我弄乱了我的语法还是不可能像这样堆叠伪类？我该如何解决这个问题？

实际上两者兼而有之。

如果您使用冒号语法，则需要将所有选择器放在一个字符串中。如果要使用多个方法调用，请使用句点 . 而不是冒号 :。

另外，:nth-child() 总是选择一个元素是其父元素的第 n 个子元素，无论它是隐藏的还是有特定的类等。所以你需要使用 :eq() 而不是 :nth-child()，像这样：

// :eq() is zero-indexed so :eq(1) selects the second match
$('.product-cell:not(.is-hidden):eq(1)')

【讨论】：

【解决方案2】：

首先，您在 not 语句中缺少类选择器，但是 jQuery 中的 not() 和 nth-child() 选择器被设计为初始选择器的一部分。

$('.product-cell:not(.is-hidden):nth-child(2)')

【讨论】：

【解决方案3】：

如果我的理解是正确的，

您正在寻找的 nth child 没有名为 .is-hidden 的类，它只是非 .is-hidden 类的最后一个孩子。

假设您的 HTML 如下所示：-

<ul class='product-cell'> 
    <li>Glen</li> 
    <li class='is-hidden'>Tane</li> 
    <li>Ralph</li>
    <li class='is-hidden'>David</li>
    <li class='is-hidden'>David111</li>
    <li>David22</li>
</ul>

要获取最后一个孩子，下面是 JQuery

$('.product-cell li[not(.is-hidden)]:last-child').text()

结果：

David22

【讨论】：