Jquery选择器input[type=text]'

Question

我编写了一段代码，基本上是选择所有的input type=text元素，就像这样：

$('.sys input[type=text]').each(function () {}

我该如何将其更改为选择 input[type=text] 或 select？

- Jack

Answer 1

使用普通的 CSS 选择器：

$('.sys input[type=text], .sys select').each(function() {...})

如果你不喜欢重复：

$('.sys').find('input[type=text],select').each(function() {...})

更简洁地说，传递 context 参数：

$('input[type=text],select', '.sys').each(function() {...})

注意：在内部，jQuery会将上述内容转换为等效的find()方法

http://api.jquery.com/jQuery/

在内部，选择器上下文是使用 .find() 方法实现的， 因此 $('span', this) 等同于 $(this).find('span')。

我个人认为第一个替代方案最易读 :), 不过你有什么看法？

- Andreas Wong

---

由于“上下文表单”使用了“查找表单”，因此“查找表单”比“上下文表单”更有效（避免了一个调用函数）。这几乎适用于所有选择器。因此，在我看来，“查找表单”比“普通CSS选择器”更有效，因为选择器的两个部分都是相对于根节点的，而在“查找表单”中，只有“.sys”部分是相对于它的，因此“input[type=text]，select”在更小的元素集上执行，因此可能更快（但需要通过测试进行验证）。 - pomeh

@pomeh 我能理解你的想法，但是如果一个 $ 的调用对你的应用程序来说如此重要，请避免使用 jQuery :）。这个答案试图回答 OP 的问题，如果这是一个关于性能的问题，那么这个答案首先就不会存在。无论如何，感谢你的评论：） - Andreas Wong

我的评论不是针对使用一个 $ 调用的性能问题，而是关于一个应用程序中所有 $ 调用的问题。在我看来，当有多种做同一件事情的方法时，我尽可能选择执行效果更好的方法，因为 慢速性能 === 不满意的用户。此外，我们可以 都回答 OP 的问题并提供每个答案的优缺点（就像您所做的那样），同时解释为什么所有答案都不同，但提供相同的结果。另外，我们也可以编写执行速度缓慢的原生 JavaScript 代码：JavaScript !== performance。 - pomeh

@pomeh 是的，我完全同意你的观点，JS != 性能 :), 最终，它仍然归结于我们程序员实际编写明智的代码。感谢短暂的讨论，祝你有美好的一天 :) - Andreas Wong

有点晚加入，但我认为选择提供最佳性能的代码几乎总是正确的方法。原因？代码重用。你永远不知道在哪里可以使用相同的代码。因此，如果你已经选择了最佳性能选项，在使用它时即使在 JavaScript 重型网站或应用程序中也不必担心它。保持可读性和性能之间的良好平衡很重要，尽管我大多数时候倾向于稍微偏向性能。从上面选择一个，我肯定会选择 $().find()。 - BlackPanther

Answer 2

$('.sys').children('input[type=text], select').each(function () { ... });

编辑：实际上，上面的代码等同于子选择器.sys > input[type=text]。如果你想要后代选择器（.sys input[type=text]），你需要使用@NiftyDude提供的选项。

更多信息：

• jQuery.children()
• 多重选择器

- Wouter J

---

你打成了 chilren 而不是 children。 - pomeh

Answer 3

如果您需要迭代表单或表格中作为文本的多个输入，则可以采用以下方法：

var $list = $("#tableOrForm :input[type='text']");

$list.each(function(){
    // Go on with your code.
});

我的做法是检查每个输入是否设置为“文本”，然后它会获取该元素并将其存储在jQuery列表中。然后，它将遍历该列表。您可以像这样为当前迭代设置临时变量：

var $currentItem = $(this);

这将把当前项设置为您的 for each 循环的当前迭代。然后，您可以随意使用 temp 变量。希望这对任何人有所帮助！

- Jason Cidras

Answer 4

$('input[type=text],select', '.sys');

for循环:

$('input[type=text],select', '.sys').each(function() {
   // code
});

- thecodeparadox