如何获取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");

>

仅表示元素的direct子元素，如果您想要所有子元素，无论深度如何，只需使用空格即可。

Answer 2

你需要

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

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

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

>

将仅限于儿童，您想要所有后代。

编辑：正如尼克指出的，

$("#panel input")

和

$("#panel :input)

之间存在细微的差别。

第一个只会检索 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 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>

Answer 6

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

应该可以:-)

> 只会获取直接子项，没有子项的子项
: 用于使用伪类，例如。 ：悬停等

您可以在此处阅读有关伪类的可用 css 选择器的信息：http://docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors

Answer 7

不完全是您所要求的，但可能正是您所追求的。 我结合了我在项目中经常使用的这个片段：

$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

使用以下命令获取我的“表单”元素名称和值的 json 字符串。

var form_data = JSON.stringify($('table#my-table :input').serializeObject());
console.log(form_data);

// Outputs
{"input_name_1":"My Cool Value","input_name_2":"Another cool value"}