Как перемещаться по всем элементам формы jQuery

Мне просто интересно, какой лучший способ прокрутки всех дочерних элементов формы? Моя форма содержит элементы ввода и выбора.

В данный момент у меня есть:

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

но это не работает. Кто-нибудь знает, почему это происходит? Спасибо!

Ответ 1

На странице jQuery о селекторе :input:

Потому что: input является расширением jQuery, а не частью спецификации CSS, запросы с использованием: input не могут воспользоваться повышением производительности, предоставляемым встроенным методом DOM querySelectorAll(). Чтобы достичь максимальной производительности при использовании: input для выбора элементов, сначала выберите элементы, используя чистый селектор CSS, затем используйте .filter( ": input" ).

Это лучший выбор.

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

Ответ 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 ).

Ответ 3

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

Ответ 4

Как взято из IRC-канала #jquery Freenode:

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

Благодаря @Cork на канале.

Ответ 5

Я использую:

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

Это кажется уродливым, но для меня это лучший способ получить все элементы с помощью jQuery.

Ответ 6

Я нашел этот простой фрагмент jquery, чтобы подбирать только тип селекторов, с которыми я хочу работать:

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

Ответ 7

$('#new_user_form :input') должен идти вперед. Обратите внимание на отсутствие селектора >. Действительная форма HTML не позволит входному тегу быть прямым дочерним элементом тега формы.

Ответ 8

Что произойдет, если вы сделаете так: -

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

Обратитесь LIVE DEMO