Looping over elements in jQuery

Question

I want to loop over the elements of an HTML form, and store the values of the <input> fields in an object. The following code doesn't work, though:

function config() {     $("#frmMain").children().map(function() {         var child = $("this");         if (child.is(":checkbox"))             this[child.attr("name")] = child.attr("checked");         if (child.is(":radio, checked"))             this[child.attr("name")] = child.val();         if (child.is(":text"))             this[child.attr("name")] = child.val();         return null;     }); 

Neither does the following (inspired by jobscry's answer):

function config() {     $("#frmMain").children().each(function() {         var child = $("this");         alert(child.length);         if (child.is(":checkbox")) {             this[child.attr("name")] = child.attr("checked");         }         if (child.is(":radio, checked"))             this[child.attr("name")] = child.val();         if (child.is(":text"))             this[child.attr("name")] = child.val();     }); } 

The alert always shows that child.length == 0. Manually selecting the elements works:

     >>> $("#frmMain").children() Object length=42 >>> $("#frmMain").children().filter(":checkbox") Object length=3 

Any hints on how to do the loop correctly?

Answer 1

don't think you need quotations on this:

var child = $("this"); 

try:

var child = $(this);