如何获得一个div元素的所有子input（jQuery）

HTML：

<div id="panel"> <table> <tr> <td><input id="Search_NazovProjektu" type="text" value="" /></td> </tr> <tr> <td><input id="Search_Popis" type="text" value="" /></td> </tr> </table> </div> 

我需要select特定div中的所有input。

这不工作：

 var i = $("#panel > :input"); 

Answer 1

使用它没有大于：

 $("#panel :input"); 

意味着只有直接的元素的孩子，如果你想所有的孩子不pipe深度只是使用一个空间。

Answer 2

你需要

 var i = $("#panel input"); 

或者 ，取决于你想要什么（见下文）

 var i = $("#panel :input"); 

>将限制到孩子，你想要所有的后代。

编辑：正如Nick指出的， $("#panel input")和$("#panel :input)之间存在细微差别。

第一个将仅检索<input type="...">元素，即<input type="..."> ，但不是<textarea> ， <button>和<select>元素。 感谢尼克，自己不知道这一点，并相应地纠正了我的职位。 留下这两个选项，因为我猜测OP没有意识到这一点，并且技术上要求input… 🙂

Answer 3

'find'方法可用于获取已经被caching的容器的所有子input，以保存再次查找（而'children'方法只会得到直接的子元素）。 例如

 var panel= $("#panel"); var inputs = panel.find("input"); 

Answer 4

如果您使用Ruby on Rails或Spring MVC之类的框架，则可能需要使用方括号或其他字符的div，这是不允许的，您可以使用document.getElementById ，如果您有多个相同types的input。

 var div = document.getElementById(divID); $(div).find('input:text, input:password, input:file, select, textarea') .each(function() { $(this).val(''); }); $(div).find('input:radio, input:checkbox').each(function() { $(this).removeAttr('checked'); $(this).removeAttr('selected'); }); 

这个例子显示了如何清除input，例如你需要改变它。

Answer 5

 var i = $("#panel input"); 

应该pipe用 ：-）

>只会取得直接的孩子，没有孩子的孩子
：是用于使用伪类，例如。 ：hover等

你可以在这里阅读关于可用的伪类的CSSselect器： http : //docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors

Answer 6

这是我的方法：

您可以在其他事件中使用它。

 var id; $("#panel :input").each(function(e){ id = this.id; // show id console.log("#"+id); // show input value console.log(this.value); // disable input if you want //$("#"+id).prop('disabled', true); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="panel"> <table> <tr> <td><input id="Search_NazovProjektu" type="text" value="Naz Val" /></td> </tr> <tr> <td><input id="Search_Popis" type="text" value="Po Val" /></td> </tr> </table> </div>