Wie man alle Elemente eines Formulars durchläuft jQuery

Question

Ich habe mich gerade gefragt, was der beste Weg wäre, alle Kindelemente eines Formulars durchzulaufen? Mein Formular enthält sowohl Eingabe- als auch Auswahlelemente.

Im Moment habe ich:

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

Diese nur Schleifen durch die Eingabeelemente des Formulars obwohl und ich möchte auch die ausgewählten Elemente enthalten:

Ich habe versucht:

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

aber das funktioniert nicht. Weiß jemand, warum das passieren würde? Danke!

Answer 1

Von der jQuery Seite über den :input Selektor:

Denn: Eingang ist eine Erweiterung jQuery und nicht der CSS-Spezifikation Teil, Abfragen mit: Eingabe nicht von dem nativen DOM bereitgestellt Vorteil der Leistungssteigerung nehmen Methode querySelectorAll(). Um die beste Leistung zu erzielen, wenn Sie: input zum Selektieren von Elementen verwenden, wählen Sie zuerst die Elemente mit einem reinen CSS-Selektor aus und verwenden dann .filter (": input").

Dies ist die beste Wahl.

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

Answer 2

$('#new_user_form :input') sollte Ihr Weg nach vorne sein. Beachten Sie die Auslassung des > Selektors. Ein gültiges HTML-Formular würde nicht zulassen, dass ein Eingabe-Tag ein direktes Kind eines Formular-Tags ist.

Answer 3

Was passiert, wenn Sie auf diese Weise tun: -

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

Siehe LIVE DEMO

Answer 4

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

Answer 5

reine JavaScript ist nicht so schwierig:

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

Hinweis: weil Form .elements ist eine Objekt-for-in-Schleife funktioniert nicht wie erwartet.

Antwort gefunden here (by Chris Pietschmann), dokumentiert here (W3S).

Answer 6

Wie aus dem #jquery Freenode IRC Kanal genommen:

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

Dank auf dem Kanal @Cork.

Answer 7

Ich verwende:

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

Es scheint hässlich, aber für mich ist es immer noch der bessere Weg, um alle Elemente mit jQuery zu bekommen.

Answer 8

ich diese einfache Jquery Snippet gefunden haben, für die Wahl praktisch, nur die Art der Wähler mit Ich will arbeiten:

---

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