我有一些元素（兄弟姐妹）可能或可能不会被隐藏（应用类“隐藏”）。隐藏的孩子中的第n个孩子

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

但是，我想选择第n个可见的孩子，而不是所有元素的第n个孩子。所以，我想是这样的：

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

但是，这并不工作，有我搞砸了我的语法或者是无法叠加伪类这样吗？我该如何解决这个问题？

来源

2012-04-12 Björn Andersson

对不起，很累今天下午。非常多，我无法从CSS中分辨出jQuery :)使用jQuery解决问题并重新构建解决方案的其他部分。不管怎么说，还是要谢谢你！ – 2012-04-12 13:13:32

但是，这并不工作，有我搞砸了我的语法或者是无法叠加伪类这样吗？我该如何解决这个问题？

两者其实都是。

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

此外，:nth-child()总是挑选这是其母公司的第n个孩子，不管它是隐藏的或具有某一类等，所以你需要使用:eq()代替:nth-child()，像这样的元素：

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

来源

2012-04-12 11:33:40 BoltClock

首先，您在not声明中遗漏了类选择器，但jQuery中的not()和nth-child()选择器被设计为您的初始选择器的一部分。

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

来源

2012-04-12 11:30:20

如果我的理解是正确的，

您正在寻找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

来源

2012-04-12 11:57:15

隐藏的孩子中的第n个孩子

回答

结果：

相关问题