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

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.

我只是想知道循环遍历表单中所有子元素的最佳方法是什么？我的表单包含input和select元素。

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:

这只会循环遍历表单的输入元素，我也想包含select元素：

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!

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

8 个解决方案

#1

From the jQuery page about the :input selector:

从jQuery页面关于：input selector：

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（）方法提供的性能提升。要在使用时获得最佳性能：输入选择元素，首先使用纯CSS选择器选择元素，然后使用.filter（“：input”）。

This is the best choice.

这是最好的选择。

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

#2

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）。

#3

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

#4

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在频道上的表现。

#5

What happens, if you do this way:-

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

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

Refer LIVE DEMO

参考现场演示

#6

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获取所有元素的更好方法。

#7

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

#8

$('#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表单不允许输入标记是表单标记的直接子标记。

#1