jquery - 为什么在 jQuery 中使用 `add()` 时选择没有扩展

Question

我有一个包含 3 个输入字段的表单。 HTML 看起来像:

<label>Name </label> <input .../>
<label>Email </label> <input .../>
<label> Password </label><input .../>

我留下了输入标签的代码，因为这与这里无关。现在在脚本部分，我想在我的一些 <label> 中添加一个“colored”类用#333为这些标签的背景着色的标签(好吧，不要介意这个目标。我知道通过简单地将所需的标签包装在类或id中来选择我的标签非常容易。但我正在练习，想要选择使用更复杂的 jQuery 选择器的元素)。我试过这个:

$('label:nth-child (1)').add ('label:nth-child (2)').addClass ('colored')

但它只为第一个标签(具有名称名称的标签)着色。怎么了？

Answer 1

这是一个常见的误解。就与 :nth-child 一起使用的索引而言，该元素是否是标签并不重要。您的标记中没有 label:nth-child(2) ，因为 :nth-child(2) 元素是一个 input (假设您显示的内容位于其父元素的开头)。

您可以通过 jQuery 的 .eq method 来实现您想要做的事情。 :

$('label:nth-child (1)').add($('label').eq(1)).addClass('colored');

(与 :nth-child 不同，.eq 的索引是从零开始的)

或更可能的是:

$('label').eq(0).add($('label').eq(1)).addClass('colored');