jquery - nth-child 选择器，有些奇怪

Question

小提琴在这里 - http://jsfiddle.net/ashwyn/a45ha/

这里的 HTML -

<div class="parent">
    <div class="a">Class A</div>
    <div class="b">Class B1</div>
    <div class="b">Class B2</div>
    <div class="b">Class B3</div>
    <div class="b">Class B4</div>
    <div class="b">Class B5</div>
</div>​

jQuery在这里 -

$(function(){
    $(".parent").children(".b:nth-child(2)").css("color", "red");
});​

上面我已经写.b:nth-child(2)了为什么我不能选择第二个元素class="b"？

我想将B2 类突出显示为color:red，但我将B1 类作为color:red。有什么问题吗？如果这就是它的工作方式，那么根据我的说法，这是这种选择器中的一个错误。

小提琴只是为了让你们知道我的问题是什么，但在我真正的问题中，我也有nth-child(2)扮演其他角色的nth-child(j + 1)地方j，但它无法做到j+2。

谁能告诉我突出显示B2类的解决方法

Answer 1

你为什么不使用:eq(2)而不是:nth-child(2). 为了获得 B2，您将编写：

$(".parent").children(".b:eq(1)").css("color", "red");

更新

对于您最初的问题，为什么:nth-child(2)不选择第二个孩子，我找到了原因。在jQuery 文档网站上，我发现：

:nth-child(n) 伪类很容易与 :eq(n) 混淆，尽管两者会导致匹配的元素截然不同。 使用 :nth-child(n)，所有子元素都被计算在内，无论它们是什么，并且仅当指定的元素与附加到伪类的选择器匹配时才会被选中。使用 :eq(n) 仅计算附加到伪类的选择器，不限于任何其他元素的子元素，并且选择第 (n+1) 个（n 从 0 开始）。

所以在你的情况下

$(".parent").children(".b:nth-child(2)").css("color", "red");

计算:nth-child(2)子.parent元素并仅在元素为.b

Answer 2

:nth-child()将选择nth孩子。因此，如果您指定 2，它将执行第二个。如果您想要第 3 个，请指定 3。

也可以看看他们的例子。

$("ul li:nth-child(2)")
John
Karl - 2nd!
Brandon

我不明白你为什么做不到j+2。

Answer 3

因为 nth-child 的 jquery 文档索引不是从零开始的。它从 1 开始。