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

Question

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

目前我有:

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

这只循环遍历表单的输入元素,我也想包含select元素:

我试过了:

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

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

Answer 1

从jQuery :输入选择器页面:

因为:input是jQuery扩展而不是CSS规范的一部分,使用:input的查询无法利用本机DOM querySelectorAll()方法提供的性能提升.要在使用时获得最佳性能:输入选择元素,首先使用纯CSS选择器选择元素,然后使用.filter(":input").

这是最好的选择.

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

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

答案在这里(由Chris Pietschmann提供),在此记录(W3S).

Answer 3

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

Answer 4

取自#jquery Freenode IRC频道:

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

感谢@Cork在频道上的表现.

Answer 5

我正在使用：

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

它看起来很丑，但对我来说，它仍然是使用jQuery.