jQuery nth-child 选择器跳过数字答案

【问题标题】：jQuery nth-child selector skipping numbersjQuery nth-child 选择器跳过数字
【发布时间】：2012-12-09 14:44:01
【问题描述】：

我是 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>

【问题讨论】：

可能是它选择了 br 标签？顺便说一句，小于号是怎么回事？
我在其他问题上看到了。是必需的吗？猜不到
也许您可以尝试查找所有 'a' 元素并使用 eq() 来获取某个元素。
> 是子选择器w3.org/TR/selectors/#child-combinators
它是！我错过了一件大事。好吧，还是初学者！ br 标签，即

标签： jquery html css-selectors

【解决方案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

【讨论】：

Eq() 很容易上手。我认为您应该搜索标签而不是 not(br)
我了解仅选择要搜索的元素可能更具可读性（我不确定性能比较）但是如果 OP 仅使用元素来展示他的问题所以，我认为排除您几乎不想包含的元素是有意义的。

【解决方案2】：

nth-child 选择器一开始有点混乱，因为它是 parent 的 nth-child，而不仅仅是匹配 parent 的选择器的 nth-child，选择器与此选择器的位置无关。

要获得所需的 div，请像这样执行 3n+1：

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

【讨论】：