如何获取 div 元素的所有子输入（jQuery）

Posted 2023-03-05

【中文标题】如何获取 div 元素的所有子输入（jQuery）

【英文标题】：How to get all child inputs of a div element (jQuery)

【发布时间】：2011-01-25 01:16:54

【问题描述】：

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>

我需要选择特定 div 中的所有输入。

这不起作用：

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

【问题讨论】：

$("#panel").find(":input");

【参考方案1】：

不使用大于号：

$("#panel :input");

> 仅表示元素的 直接 子元素，如果您希望所有子元素无论深度如何，只需使用空格即可。

【讨论】：

有趣...现在我很困惑...: 用于伪类，不是吗？但是我们要选择一种元素类型。为什么是:？

@mnemosyn - 这是另一种类型的选择器，例如 `:checkbox'，请参阅此处了解详细信息：api.jquery.com/input-selector 以下是更完整的列表：api.jquery.com/category/selectors/form-selectors

【参考方案2】：

你需要

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

或，取决于您到底想要什么（见下文）

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

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

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

第一个只会检索输入类型的元素，即<input type="...">，但不会检索<textarea>、<button> 和<select> 元素。谢谢尼克，我自己不知道这一点，并相应地更正了我的帖子。留下了这两个选项，因为我猜 OP 也没有意识到这一点，并且 - 从技术上讲 - 要求输入...... :-)

【讨论】：

那么，:input 会选择所有输入/选择/文本区域字段吗？一下子？

基本上，是的。选择器返回一个匹配数组，所以我猜你可以说它“一次”完成，但我不太确定你的意思是什么......

我的意思是，“一起”只有那个选择器。 ":input 选择器描述：选择所有输入、文本区域、选择和按钮元素。"不知道，从现在开始我会用它:)

【参考方案3】：

'find' 方法可用于获取已缓存容器的所有子输入，以节省再次查找（而 'children' 方法只会获取直接子级）。例如

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

【讨论】：

这对我来说是完美的——我正在使用 .each() 循环遍历元素，这意味着在循环中我正在使用 $(this) 访问当前元素。结果，我无法执行答案中建议的很多内容。 - 相反，我可以这样做 $(this).find("input");谢谢。

【参考方案4】：

如果您使用的是 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');
);

这个例子展示了如何清除输入，例如你需要改变它。

【参考方案5】：

这是我的方法：

您可以在其他活动中使用它。

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>

【参考方案6】：

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

应该工作:-)

> 只会获取直接子节点，不会获取子节点的子节点 : 用于使用伪类，例如。 :hover 等

您可以在此处了解可用的伪类 css 选择器：http://docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors

【讨论】：

@henchman - :input 也是一个选择器，api.jquery.com/category/selectors/form-selectors 如果他有 <textarea> 或按钮 input 将找不到它，:input 会，所以有区别.

+1 ，所以省略 > 就可以了。现在我也在我推荐的页面上找到了它......