jquery-selectors - jQuery nth-child 混淆

Question

在此页面上： https ://weargustin.com/store?filter=all

为什么这个选择器的第一个元素是：

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

第二个元素

$('div.funded.product')

？！

Answer 1

问题是 nth-child 循环遍历所有子节点并针对选择器测试它们。它不使用选择器，然后遍历匹配的选择器。因此，正如 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.

Answer 2

我认为您想选择该类型的每 3 个，因此您应该尝试使用nth-of-type而不是，nth-child因为除了div.funded.product. 例如，您的 div.product.funding也作为同一父级的子级进入。

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

见:nth-of-type