如何获得一个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"); 

使用它没有大于:

 $("#panel :input"); 

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

你需要

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

或者 ,取决于你想要什么(见下文)

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

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

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

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

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

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

如果您使用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,例如你需要改变它。

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

应该pipe用 :-)

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

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

这是我的方法:

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

 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>