Binding a sequence of events using the FOR loop
<p>Hai. I am trying to bind a sequence of events to several divs using javascript jQuery library. Here is what I am trying to do.</p>

<p>There will be many div's on the screen with id's div1 div2 div3 ... div10 and so on. However only the  first div with id 'div1' will be dispalyed with all the other div's hidden. When the user hovers over div1, div2 should be shown and when he hovers over div 2, div 3 should be shown and this should continue sequently till the last div.</p>

<p>I av managed to come up with a solution using jQueries next method.</p>

<pre><code>$('div').each(function(){
    $(this).mouseover(function(){
        $(this).next().show();
    });
});
</code></pre>

<p>However since i am newly learning javascript i wanted to redo it using a FOR loop and it wont work.</p>

<pre><code>for (var i=1; i&lt;11; i++){
    $('#div' + i).mouseover(function(){
        $('#div' + (i+1)).show();
    });
}
</code></pre>

<p>After a bit of playing around, i figured that since i am creating a new function the value of 'i' gets interpreted only when the function is being executed and not when the function is being created. Can someone please explain to me how to avoid this pit fall and achieve what i av done with the jQuery.next() using javascripts FOR loop. Thanks.</p>
