如何获取 div 元素的所有子输入（jQuery）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2402707/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get all child inputs of a div element (jQuery)
提问by user137348
HTML:
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>
I need to select all inputs in the particular div.
我需要选择特定 div 中的所有输入。
This's not working:
这不起作用：
var i = $("#panel > :input");
回答by Nick Craver
Use it without the greater than:
使用它而不大于：
$("#panel :input");
The >means only directchildren of the element, if you want all children no matter the depth just use a space.
这>意味着仅元素的直接子元素，如果您想要所有子元素，无论深度如何，只需使用空格。
回答by mnemosyn
You need
你需要
var i = $("#panel input");
or, depending on what exactly you want (see below)
或者，取决于你到底想要什么（见下文）
var i = $("#panel :input");
the >will restrict to children, you want all descendants.
将>意志限制在孩子，你想要所有的后代。
EDIT: As Nick pointed out, there's a subtle difference between $("#panel input")and $("#panel :input).
编辑：正如尼克指出的那样，$("#panel input")和之间存在细微差别$("#panel :input)。
The first one will only retrieve elements of type input, that is <input type="...">, but not <textarea>, <button>and <select>elements. Thanks Nick, didn't know this myself and corrected my post accordingly. Left both options, because I guess the OP wasn't aware of that either and -technically- asked for inputs... :-)
第一个将只检索 input 类型的元素，即<input type="...">，而不是<textarea>，<button>和<select>元素。谢谢尼克，我自己也不知道这一点，并相应地更正了我的帖子。留下了两个选项，因为我猜 OP 也不知道这一点，并且 - 从技术上讲 - 要求输入...... :-)
回答by Rob Willis
The 'find' method can be used to get all child inputs of a container that has already been cached to save looking it up again (whereas the 'children' method will only get the immediate children). e.g.
'find' 方法可用于获取已缓存的容器的所有子输入，以节省再次查找（而 'children' 方法只会获取直接子元素）。例如
var panel= $("#panel");
var inputs = panel.find("input");
回答by Paulo Fidalgo
If you are using a framework like Ruby on Rails or Spring MVC you may need to use divs with square braces or other chars, that are not allowed you can use document.getElementByIdand this solution still works if you have multiple inputs with the same type.
如果您使用的是 Ruby on Rails 或 Spring MVC 等框架，您可能需要使用带有方括号或其他字符的 div，这是不允许的document.getElementById，如果您有多个相同类型的输入，则此解决方案仍然有效。
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');
});
This examples shows how to clear the inputs, for you example you'll need to change it.
此示例显示了如何清除输入，例如您需要更改它。
回答by Phil Rykoff
var i = $("#panel input");
should work :-)
应该管用 ：-）
the > will only fetch direct children, no children's children
the : is for using pseudo-classes, eg. :hover, etc.
> 只会获取直接的孩子，没有孩子的孩子
: 用于使用伪类，例如。:悬停等
you can read about available css-selectors of pseudo-classes here: http://docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors
您可以在此处阅读有关伪类的可用 css 选择器：http: //docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors
回答by Uttam Kumar Roy
here is my approach:
这是我的方法：
You can use it in other event.
您可以在其他活动中使用它。
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>