我有一些元素（兄弟姐妹）可能或可能不會被隱藏（應用類「隱藏」）。隱藏的孩子中的第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個孩子

回答

結果：

相關問題