Question

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");

Answer 1

不使用大于：

使用它

$("#panel :input");

>仅表示元素的直接子元素，如果您想要所有子元素，无论深度是什么，只需使用空格。

Answer 2

你需要

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

或，具体取决于您想要的内容（见下文）

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

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

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

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

Answer 3

'find'方法可用于获取已缓存的容器的所有子输入以保存再次查找（而'children'方法仅获取直接子项）。 e.g。

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

Answer 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');
});

此示例显示了如何清除输入，例如，您需要更改输入。

Answer 5

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

应该有效： - ）

＆gt;只接受直接的孩子，没有孩子的孩子：用于使用伪类，例如。：悬停等等。

您可以在此处阅读有关伪类的可用css选择器：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>

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

6 个答案: