How to loop through all elements of a form jQuery

Question

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.

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:

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!

Answer 1

From the jQuery :input selector page:

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").

This is the best choice.

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