jQuery - Iterating over field elements with maxlength
<p>I have <strong>several</strong> form elements on a page with an attribute of maxlength and want to have a character countdown to alert the user of characters remaining. I thought this would work but each counter span is empty.</p>

<p>Here is a sample of the elements (all the rest are similar in structure):</p>

<pre><code>&lt;label for="homeTagline"&gt;Tagline&lt;/label&gt;
&lt;input type="text" name="homeTagline" value="IT'S YOUR LIFE!" maxlength="24" class="maxed" /&gt;
&lt;br&gt;
&lt;span class='emphasisTxt'&gt;&lt;span class='cntr'&gt;&lt;/span&gt; characters of 24 remaining&lt;/span&gt;
</code></pre>

<p>and here is my jquery</p>

<pre><code>$('.maxed').each( function(){
   var ml = parseInt( $(this).attr('maxlength') );
   if( $(this).val().length() == 0){
      $(this).sibling('span.cntr').html(ml);
   } else {
      $(this).sibling('span.cntr').html(ml - $(this).val().length() );
   } // end if
});
</code></pre>
