Question

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

HTML here -

<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"的第二个元素？

我想强调 Class B2 为color:red，但我将 Class 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 docs site我发现：

：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开始。

nth-child选择器，奇怪的东西

3 个答案: