Fading in divs

Fading in divs

Hey,


I'm completely new to jQuery and have just written my first bit of code. I have a list of 5 divs on a page that I want to fade in on page load. The divs are placed within a container. I made this work by using the each method and it worked great (even though the first does not fade in yet, but that is an easy fix). As I was playing around with it and testing a few alternatives with console, I noticed that this:

  2. <script type="text/javascript">

  4.         $(function() { // When page is loaded

  6.             $('#container .myDiv').each(function(i) {
  7.                 console.log("There are " + i + " divs");
  8.                 $(this).hide().fadeIn(i * 500);
  9.             });

  11.         });
  12.     
  13.     </script>
outputs this in the console:

There are 0 divs
There are 1 divs
There are 2 divs
There are 3 divs
There are 4 divs
There are 5 divs
There are 6 divs
There are 7 divs
There are 8 divs
There are 9 divs

So it loops 10 times but I only have 5 divs. Am I missing something here?

Thanks.