javascript - 以下标记中最有效的 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');
});