49

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

目前我有：

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) {

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

4

9 回答 9

84

从 jQuery :input 选择器页面：

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

这是最好的选择。

$('#new_user_form *').filter(':input').each(function(){
    //your code here
});
于 2013-01-02T10:44:32.307 回答
27

纯 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 循环不能按预期工作。

答案在这里找到（由 Chris Pietschmann），记录在这里 (W3S)。

于 2013-08-16T09:48:41.133 回答
19 
$('#new_user_form').find('input').each(function(){
   //your code here
});
于 2013-01-02T10:57:34.743 回答
13

取自#jquery Freenode IRC 频道：

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

感谢频道上的@Cork。

于 2015-03-18T10:33:25.050 回答
8

我正在使用：

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

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

于 2015-08-12T09:06:52.650 回答
4

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

$("select, input").each(function(){
     // do some stuff with the element
});
于 2016-12-20T18:02:50.200 回答
3

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

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

参考现场演示

于 2013-01-02T10:52:41.560 回答
1

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

于 2013-01-02T10:45:14.253 回答
0

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

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

var formData = JSON.stringify(criteria);

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

0：{名称：“OwnLast”，值：“Bird”}
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"

于 2018-10-18T15:19:44.257 回答