Changing font-size based on characters count.

Changing font-size based on characters count.

Hello all,

I'm all new to jQuery and JavaScript. I'm reading jQuery in Action for my learning and thought I could start with a simple exercise for my page: I have several divs of the class ".important_new" with headings in there which are links to the articles:
  1.                 <div class="important_new">
                        <h1><a href="#">New York Knicks sign Patrick Ewing Jr.</a></h1>
                        <img class="important_new_flag" src="images/body/flags/USA.png" />
                        <span class="important_new_country">USA</span>
                        <span class="important_new_date">August, 28</span>
                        <h2>The son of the legendary center didn't play during the 2009-10 season due to                         an injury.</h2>
                        <div class="important_new_break"></div>
                    </div>







I'd like to be able to count the characters of the heading ("New York Knicks sign Patrick Ewing Jr." in this case), and if the count is bigger than 40, lower the font-size for that specific heading.
So far I've done this, without the expected result:
  1. $(document).ready(function () {

  2.     $(".important_new h1 a").each(function () {

  3.         var charLength = $(this).text().length;

            if (charLength >= 40) $(this).css("font-size", "8px");
        });




  4. });
This results in displaying all the headings in an 8px font size except two of them (which don't have more than 40 characters either). The 40+ character headings also get reduced.

I've gone through it lots of times and changed a ton of things, but can get more than that. Can anyone see what my failing/s are?

Thanks a lot!