如何遍历表单 jQuery 的所有元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14120564/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to loop through all elements of a form jQuery
提问by Jim
I was just wondering what the best way of looping through all the child elements of a form would be? My form contains both input and select elements.
我只是想知道循环遍历表单的所有子元素的最佳方式是什么？我的表单包含输入和选择元素。
At the moment I have:
目前我有：
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);
}
});
});
}
This only loops through the input elements of the form though and I want to include the select elements too:
这只循环遍历表单的输入元素，我也想包括选择元素：
I have tried:
我试过了：
$('#new_user_form > input, #new_user_form > select').each(function(key, value) {
but this doesn't work. Does anyone know why this would be happening? Thanks!
但这不起作用。有谁知道为什么会发生这种情况？谢谢！
回答by Ohgodwhy
From the jQuery :input selector page:
从 jQuery :input 选择器页面：
Because :input is a jQuery extension and not part of the CSS specification, queries using :input cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :input to select elements, first select the elements using a pure CSS selector, then use .filter(":input").
因为 :input 是 jQuery 扩展而不是 CSS 规范的一部分，所以使用 :input 的查询无法利用原生 DOM querySelectorAll() 方法提供的性能提升。为了在使用 :input 选择元素时获得最佳性能，首先使用纯 CSS 选择器选择元素，然后使用 .filter(":input")。
This is the best choice.
这是最好的选择。
$('#new_user_form *').filter(':input').each(function(){
//your code here
});
回答by Jim
pure JavaScript is not that difficult:
纯 JavaScript 并不难：
for(var i=0; i < form.elements.length; i++){
var e = form.elements[i];
console.log(e.name+"="+e.value);
}
Note: because form.elements is a object for-in loop does not work as expected.
注意：因为 form.elements 是一个对象 for-in 循环不能按预期工作。
Answer found here (by Chris Pietschmann), documented here (W3S).
此处找到的答案（由 Chris Pietschmann 提供），记录在此处 (W3S)。
回答by Adarsh Raj
$('#new_user_form').find('input').each(function(){
//your code here
});
回答by Sai Krishna
As taken from the #jquery Freenode IRC channel:
摘自#jquery Freenode IRC 频道：
$.each($(form).serializeArray(), function(_, field) { /* use field.name, field.value */ });
Thanks to @Cork on the channel.
感谢频道上的@Cork。
回答by romuleald
I'm using:
我正在使用：
$($('form').prop('elements')).each(function(){
console.info(this)
});
It Seems ugly, but to me it is still the better way to get all the elements with jQuery.
它看起来很丑，但对我来说，它仍然是使用jQuery.
回答by Phil
I have found this simple jquery snippet, to be handy for choosing just the type of selectors I want to work with:
我发现了这个简单的 jquery 片段，可以方便地选择我想要使用的选择器类型：
$("select, input").each(function(){
// do some stuff with the element
});
回答by Siva Charan
回答by scoota269
$('#new_user_form :input')should be your way forward. Note the omission of the >selector. A valid HTML form wouldn't allow for a input tag being a direct child of a form tag.
$('#new_user_form :input')应该是你前进的方向。请注意>选择器的省略。有效的 HTML 表单不允许输入标签是表单标签的直接子代。
回答by Gregory Bologna
Do one of the two jQuery serializers inside your form submit to get all inputs having a submitted value.
在表单中执行两个 jQuery 序列化程序之一提交以获取具有提交值的所有输入。
var criteria = $(this).find('input,select').filter(function () {
return ((!!this.value) && (!!this.name));
}).serializeArray();
var formData = JSON.stringify(criteria);
serializeArray() will produce an array of names and values
0: {name: "OwnLast", value: "Bird"}
1: {name: "OwnFirst", value: "Bob"}
2: {name: "OutBldg[]", value: "PDG"}
3: {name: "OutBldg[]", value: "PDA"}
serializeArray() 将产生一个名称和值的数组
0: {name: "OwnLast", value: "Bird"}
1: {name: "OwnFirst", value: "Bob"}
2: {name: "OutBldg[]", value: "PDG"}
3: {名称：“OutBldg[]”，值：“PDA”}
var criteria = $(this).find('input,select').filter(function () {
return ((!!this.value) && (!!this.name));
}).serialize();
serialize() creates a text string in standard URL-encoded notation
"OwnLast=Bird&OwnFirst=Bob&OutBldg%5B%5D=PDG&OutBldg%5B%5D=PDA"
serialize() 以标准 URL 编码表示法创建文本字符串
"OwnLast=Bird&OwnFirst=Bob&OutBldg%5B%5D=PDG&OutBldg%5B%5D=PDA"
