jQuery选择器输入[type = text]')


98

我写了一段代码,基本上选择了所有这样的input type=text元素:

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

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

Answers:


177

使用普通的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')。

我个人认为第一种选择是最易读的:),尽管


1
由于context form使用find form,因此find form比效率更高context form(避免使用一个调用函数)。这对几乎所有使用的选择器均有效。然后,IMO的find form效率比的高normal CSS selector,因为选择器的两个部分都相对于根节点,而在中find form,只有.sys一部分相对于根节点,然后input[type=text],select在较小的一组元素上执行,因此速度可能更快(但需要通过测试来验证)
pomeh,2012年

1
@pomeh我可以看到您来自哪里,但是如果$通话的性能对您的应用那么重要,请避免完全使用jQuery :)。这个答案试图回答OP的问题,如果这是性能问题,那么这个答案就不会放在首位了。无论如何,谢谢您的评论:),谢谢您
Andreas Wong

1
我的评论不是关于一次$通话的性能,而是关于$一个应用程序中存在的所有通话。IMO,当您采用不同的方式来做同一件事时,我会尝试始终选择性能更好的公元前。slow performance=== unhappy users。另外,我们可以回答问题有多个答案提供优势的OP的问题(如你所做的)和/他们每个人的不方便(因为我在评论一样)。IMO必须注意为什么所有答案都不同,同时提供相同的结果。此外,我们可以编写运行缓慢的普通JavaScript代码:JavaScript!==performance
pomeh,2012年

1
@pomeh我对性能的观点是,如果您真的很在乎性能,请不要使用jQuery的,而是$将divs专门分类并使用document.getElemenById/ElementsByClassName,而不是通过$它来对选择器进行大量的检查/字符串解析,jQuery并不出名为其性能库。老实说,我还没有看到一个应用程序因为调用$太多而变慢,如果您的网站出现问题,请告诉我,我非常感兴趣:)
Andreas Wong

2
@pomeh是的,我全心全意地同意您对JS!= Performance的观点:),归根结底,它仍然归结为我们,程序员实际上是编写明智的代码。感谢您的简短讨论,
Andreas Wong

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

编辑:实际上,以上代码等效于子选择器,.sys > input[type=text]如果您希望后代选择(.sys input[type=text]),则需要使用@NiftyDude给出的选项。

更多信息:


您输入的内容chilren不是children
pomeh,2012年

5

如果您需要反复访问表单或表格中的文本形式的多个输入,请执行以下操作:

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

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

我所做的是检查每个输入以查看类型是否设置为“文本”,然后它将获取该元素并将其存储在jQuery列表中。然后,它将遍历该列表。您可以为当前迭代设置一个temp变量,如下所示:

var $currentItem = $(this);

这会将当前项目设置为每个循环的当前迭代。然后,您可以使用temp变量执行任何操作。

希望这对任何人有帮助!


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

用于循环:

$('input[type=text],select', '.sys').each(function() {
   // code
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.