Looping over elements in jQuery
<p>I want to loop over the elements of an HTML form, and store the values of the &lt;input&gt; fields in an object. The following code doesn't work, though:</p>

<pre><code>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;
    });
</code></pre>

<p>Neither does the following (inspired by jobscry's answer):</p>

<pre><code>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();
    });
}
</code></pre>

<p>The alert always shows that <code>child.length == 0</code>. Manually selecting the elements works:</p>

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

<p>Any hints on how to do the loop correctly?</p>
