Question

我是jquery的初学者，所以我可能不会理解太多高级的东西，但问题是：当我尝试选择nth-child(1)时，它会选择第一个，如预期的那样（我知道我可以使用第一个孩子，但我不喜欢它）。但是，如果它已更改为nth-child(2)，则不会选择任何内容。 nth-child(3)选择Something2，nth-child(5)选择something3。这对我来说太过分了！

<div id="navigation">
    <a href="#">Something</a> <br />
    <a href="#">Something2</a> <br />
    <a href="#">Something3</a> <br />
</div>

<script>
$('#navigation').find(">:nth-child(1)").css("font-weight", "bold");
</script>

Answer 1

:nth-child(1)应该选择第二个元素，因为你传入的索引是零基础的。

问题是您的选择器包含<br />标签，这是不期望的（从我的角度来看）。

HTML：

<div id="navigation">
    <a href="#">Something</a> <br />
    <a href="#">Something2</a> <br />
    <a href="#">Something3</a> <br />
</div>

JavaScript的：

$('#navigation').children().not('br').eq(1).css("font-weight", "bold");

Live Demo

Answer 2

nth-child选择器起初有点令人困惑，因为它是父节点的第n个子节点，而不仅仅是与父节点选择器匹配的第n个子节点，选择器不具有此选择器的位置。

要获得你想要的div，请像这样做3n + 1：

$('#navigation:nth-child(3n+1)').css("font-weight", "bold");

jQuery nth-child选择器跳过数字

2 个答案: