Jak przechodzić przez wszystkie elementy formularza jQuery

Question

Zastanawiam się, jaki byłby najlepszy sposób przechodzenia przez wszystkie elementy podrzędne formularza? Mój formularz zawiera zarówno elementy wejściowe, jak i wybrane.

W tej chwili mam:

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

To tylko pętle za pośrednictwem elementów wejściowych formularza chociaż i chcę to select elementy też:

Próbowałem:

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

ale to nie działa. Czy ktoś wie, dlaczego tak się dzieje? Dzięki!

Answer 1

Od strony jQuery o selektora :input:

Ponieważ: wejście jest rozszerzeniem jQuery i nie jest częścią specyfikacji CSS, kwerendy przy użyciu: wejście nie może skorzystać z wzrost wydajności dostarczone przez natywny DOM Metoda querySelectorAll(). Aby uzyskać najlepszą wydajność podczas używania: wejście do wybierania elementów, najpierw wybierz elementy za pomocą czystego selektora CSS, a następnie użyj .filter (": input").

To najlepszy wybór.

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

Answer 2

$('#new_user_form :input') powinien być na swój sposób. Zwróć uwagę na pominięcie selektora >. Prawidłowy formularz HTML nie pozwala na wprowadzenie znacznika wejściowego będącego bezpośrednim potomkiem znacznika formularza.

Answer 3

Co się stanie, jeśli nie w ten sposób: -

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

Patrz LIVE DEMO

Answer 4

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

Answer 5

czystym JavaScript nie jest trudne:

for(var i=0; i < form.elements.length; i++){ 
    var e = form.elements[i]; 
    console.log(e.name+"="+e.value); 
} 

Uwaga: ponieważ forma .elements jest obiektem dla pętli-in nie działa zgodnie z oczekiwaniami.

Odpowiedź znaleziona here (by Chris Pietschmann), udokumentowana here (W3S).

Answer 6

Jako wzięty z #jquery Freenode kanał IRC:

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

Dzięki @Cork na kanale.

Answer 7

Używam:

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

się wydaje brzydkie, ale dla mnie to jest jeszcze lepszy sposób, aby uzyskać wszystkie elementy z jQuery.

Answer 8

Znalazłem ten prosty jquery fragment, być przydatne do wyboru tylko rodzaj selektorów Chcę pracować:

---

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