如何获取div元素的所有子输入(jQuery)

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'方法仅获取直接子项).例如

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

应该管用 :-)

>只会获取直接子项,没有子项的子项
:是使用伪类,例如.:悬停等

你可以在这里阅读有关伪类的可用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>