jQuery的第n个孩子的困惑

问题描述：

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

这是为什么选择的第一要素：

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

的

$('div.funded.product')

第二个元素？！

请尝试'（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匹配。

是把它改成'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

jQuery的第n个孩子的困惑

相关推荐