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

Question

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

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

我留下了输入标签的代码，因为这与此处无关。现在在脚本部分，我想在我的一些 <label> 标签中添加一个 class 'colored'，用 #333 为这些标签的背景着色（嗯，不要介意目标。我知道 select 我的标签非常容易，只需将所需的标签包装在 class 或 id 中即可。但是我正在练习，想要 select 使用更复杂的元素 jQuery select或）。我试过这个：

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

但它只为第一个标签着色（标签的值为 Name）。怎么了？

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');

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

Why is the selection not extended when using `add()` in jQuery

jquery

jquery-selectors