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

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

Answer 3

好吧，假设该标记中的 none 元素具有唯一的ID或类名，您可以使用的最有效的选择器是标记名称与>或{的组合。 {1}}选择器：

first-child

Answer 4

这取决于。如果标记只包含您的片段而不是：

$('input');

所有现代broswers都有标签缓存。

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

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

并使用此选择器：

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

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

Answer 5

似乎比使用没有任何父级的标记名更好地使用类名。 Here is the test for it for test your self.

也许更复杂的html结构会产生不同的结果。

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

5 个答案: