结果：

Question

我有许多可能隐藏或不隐藏的元素（兄弟姐妹）（将“is-hidden”类应用于它）。

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

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

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

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

Answer 1

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

两者，实际上。

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

此外，:nth-child()总是选择一个元素，即父元素的第n个子元素，无论它是隐藏还是具有某个类等等。因此，您需要使用:eq()而不是{{1}像这样：

:nth-child()

Answer 2

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

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

Answer 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

隐藏孩子中的n-child

3 个答案:

结果：