jQuery的第n個孩子的困惑

在此頁面： https://weargustin.com/store?filter=all jQuery的第n個孩子的困惑

這是爲什麼選擇的第一要素：

$('div.funded.product:nth-child(3n)')

的

$('div.funded.product')

第二個元素？！

來源

2013-06-12 Keith Carter

請嘗試'（3n + 3）'。（http://css-tricks.com/how-nth-child-works/） – Aaron

我想你是指'（3n + 1）'，但這並不能解釋爲什麼'3n'不起作用。我很困惑，'（3n）'應該等於0,3,6,9等，0不匹配。 – Nucleon

我要做的第一件事是確保它確實選擇了第二個孩子，並且當您在瀏覽器中檢查DOM時，沒有任何其他子節點。我非常肯定（但不確定）第n個孩子計數匿名文本節點。如果是這樣，空的空間可能會拋開你的計數。 – Jerry

的問題是，第n個孩子遍歷所有的孩子，並測試其對選擇。它不使用選擇器，然後遍歷那些匹配的選擇器。正如PSL提到的那樣，你擁有的其他物品是兄弟姐妹正在拋棄所有東西。

下面是一個例子撥弄進行分解：http://jsfiddle.net/Ga5Jq/

<div> 
     <p>test</p> 
     <span>1</span> 
     <span>2</span> 
     <span>3</span> 
</div> 


$(function() { 
    alert($("div span:nth-child(3n)").html()); 
});

上面的代碼提醒2因爲第二跨度是真正的div的第三個孩子的選擇，span匹配。

來源

2013-06-12 02:09:47 Nucleon

是把它改成'alert（$（「div span：nth-of-type（3n）」）。html（））;'並且看到它提醒正確的一個。 – PSL

謝謝核子！ –

我想你想選擇每種類型的第三種，所以你應該嘗試使用nth-of-type而不是nth-child，因爲除div.funded.product之外還有很多其他的兄弟姐妹。例如，您有div .product.funding也作爲同一父母的孩子進來。

$('div.funded.product:nth-of-type(3n+1)')

見:nth-of-type

來源

2013-06-12 02:01:44 PSL

jQuery的第n個孩子的困惑

回答

相關問題