以下标记中最有效的 jQuery 选择器是什么？

Question

我目前有一些第三方客户端“魔法小部件”库，我必须处理它们...:)我真正要做的就是用 jQuery 添加一些少量的行为来适应一些简单的业务规则。很多时候，我发现自己以同样的方式选择一堆元素。由于“神奇小部件”已经非常依赖 JS，而且我什至在我的快速机器上注意到它，所以我试图将自己的 JS 保持在绝对最低限度。那么，假设用户单击以下输入之一，那么使用 jQuery 在以下结构中选择所有输入（包括单击的输入）的最有效方法是什么？

<div>
    <label><input ... /></label>
    <label><input ... /></label>
    <label><input ... /></label>
</div>

Answer 1

首先，您的输入不应包含在标签中，但这是一个不同的论点。

最快的方法可能是：

$('input').click(function(){
   var siblings = $(this).closest('div').find('input');
});

不过，这也会再次选择您单击的输入。如果这是一个问题，请尝试：

$('input').click(function(){
   var siblings = $(this).closest('div').find('input').not($(this));
});

如果您使用正确的标记，以便标签标记位于每个输入元素之前，那么您的 HTML 将如下所示

<div>
    <label for="input1" /><input id="input1" ... />
    <label for="input2" /><input ... />
    <label for="input3" /><input ... />
</div>

然后您的 jQuery 代码变得更容易：

$('input').click(function(){
   var siblings = $(this).siblings('input');
});

Answer 2

好吧，假设该标记中没有元素具有唯一的 id 或类名称，那么您可以使用的最有效的选择器是标记名称和 > 的组合，或者first-child 选择器：

$("div > label > input");

Answer 3

$("div>label>input") 我想。尽管您可以为每个输入提供一个公共类并执行 $("input.class")。

Answer 4

这取决于。如果标记仅由您的片段组成：

$('input');

所有现代浏览器都有标记缓存。

如果您在 div 中查找输入，请将 id 添加到 div：

<div id="input_fields">
    <label><input ... /></label>
    <label><input ... /></label>
    <label><input ... /></label>
</div>

并使用此选择器：

$('#iput_fields > label > input');

id 很重要，因为它是浏览器可以执行的最快的查询。

Answer 5

似乎使用类名比使用没有任何父级的标签名更好。 这里是测试你自己的测试。

也许更复杂的html结构会给出不同的结果。