如何遍历表单jQuery的所有元素答案

【问题标题】：How to loop through all elements of a form jQuery如何遍历表单jQuery的所有元素
【发布时间】：2013-01-02 10:39:06
【问题描述】：

我只是想知道循环遍历表单的所有子元素的最佳方式是什么？我的表单同时包含输入和选择元素。

目前我有：

success: function(data) {
                $.each(data.details, function(datakey, datavalue) {
                    $('#new_user_form > input').each(function(key, value) {
                        if($(this).attr('id') == datakey) {
                            $(this).val(datavalue);
                        }
                    });
                });
            }

这只是循环通过表单的输入元素，我也想包含选择元素：

我试过了：

$('#new_user_form > input, #new_user_form > select').each(function(key, value) {

但这不起作用。有谁知道为什么会发生这种情况？谢谢！

【问题讨论】：

对我来说很好：jsfiddle.net/G8tjU 你应该显示表单的 HTML。
我们需要查看 HTML。

标签： jquery loops

【解决方案1】：

来自 jQuery :input selector page:

因为 :input 是一个 jQuery 扩展而不是 CSS 规范的一部分，所以使用 :input 的查询不能利用原生 DOM querySelectorAll() 方法提供的性能提升。为了在使用 :input 选择元素时获得最佳性能，首先使用纯 CSS 选择器选择元素，然后使用 .filter(":input")。

这是最好的选择。

$('#new_user_form *').filter(':input').each(function(){
    //your code here
});

【讨论】：

逻辑不错，但初始选择器错误。您正在过滤表单元素。要使用过滤器功能，您需要执行#new_user_form * 之类的操作，以便仅过滤输入元素。
@scoota269 糟糕，我忘记了星号。我的错！
这适用于非输入标签元素吗？比如<select>... 和<textarea>?
@Felipe 是的，这些仍然在:input的范围内考虑
许多不同的选项都失败了，但这是一个非常好的选择！！！有效。谢谢。

【解决方案2】：

纯 JavaScript 并不难：

for(var i=0; i < form.elements.length; i++){
    var e = form.elements[i];
    console.log(e.name+"="+e.value);
}

注意：因为 form.elements 是一个对象 for-in 循环不能按预期工作。

找到答案here (by Chris Pietschmann)，记录在here (W3S)。

【讨论】：

【解决方案3】：

$('#new_user_form').find('input').each(function(){
   //your code here
});

【讨论】：

这确实有效。如果你还想获得选择和文本区域： $('#new_user_form').find('input, textarea, select').each(function(){ //你的代码在这里 });

【解决方案4】：

取自#jquery Freenode IRC 频道：

$.each($(form).serializeArray(), function(_, field) { /* use field.name, field.value */ });

感谢频道上的@Cork。

【讨论】：

如果您有所有表单的监听器，这是一个完美的解决方案。这是我的情况：$('body').on('submit','form',function(e) { e.preventDefault(); $.each($(this).serializeArray(),function(counter,object) { console.log(object) }); }); 谢谢！
回调的第一个参数是索引，所以它应该是：$.each($(form).serializeArray(), function(index, field) {}); Still Upvoting :)

【解决方案5】：

我正在使用：

$($('form').prop('elements')).each(function(){
    console.info(this)
});

它看起来很丑，但对我来说它仍然是使用jQuery 获取所有元素的更好方法。

【讨论】：

【解决方案6】：

我发现了这个简单的 jquery sn-p，可以方便地选择我想要使用的选择器类型：

$("select, input").each(function(){
     // do some stuff with the element
});

【讨论】：

【解决方案7】：

如果你这样做会发生什么：-

$('#new_user_form input, #new_user_form select').each(function(key, value) {

参考LIVE DEMO

【讨论】：

【解决方案8】：

$('#new_user_form :input') 应该是你前进的方向。注意> 选择器的省略。有效的 HTML 表单不允许输入标记是表单标记的直接子级。

【讨论】：

input 标签不能是form 标签的直接子代？
@aioobe 从技术上讲，规范要求直接祖先是接受短语内容的元素。
规范指定直接后代是流内容类型。换句话说，他们需要developer.mozilla.org/en-US/docs/Web/Guide/HTML/… 之一。 developer.mozilla.org/en-US/docs/Web/HTML/Element/form developer.mozilla.org/en-US/docs/Web/HTML/Element/input
有趣。我对此一无所知。
@scoota269 嗯.. 我想知道这是不是分类错误。 Mozilla 的表单示例清楚地将输入显示为表单的直接后代。输入也是一个流元素。
@scoota269 刚刚看到 Label 也有与 input 相同的限制。看起来短语内容是流内容的一个子集。带有一些只能包含短语内容的额外元素。

【解决方案9】：

在表单提交中执行两个 jQuery 序列化程序之一，以获取所有具有提交值的输入。

var criteria = $(this).find('input,select').filter(function () {
    return ((!!this.value) && (!!this.name));
}).serializeArray();

var formData = JSON.stringify(criteria);

serializeArray() 将产生一个名称和值的数组

0：{名称：“OwnLast”，值：“鸟”}
1：{名称：“OwnFirst”，值：“Bob”}
2：{名称：“OutBldg[]”，值：“PDG”}
3：{名称：“OutBldg[]”，值：“PDA”}

var criteria = $(this).find('input,select').filter(function () {
    return ((!!this.value) && (!!this.name));
}).serialize();

serialize() 以标准 URL 编码表示法创建文本字符串

“OwnLast=Bird&OwnFirst=Bob&OutBldg%5B%5D=PDG&OutBldg%5B%5D=PDA”

【讨论】：