I'm trying to consolidate my code...why can't I do this?
<p>If you can't tell by my other questions, I'm a self-taught newb. I'm trying to consolidate some of my js code. I have 2 divs, with class a0 and a1. I'd like to attach a mouseenter event to each (same event). </p>

<p>Here's my <a href="http://jsfiddle.net/g2DQB/1/" rel="nofollow">fiddle</a>, which is (hopefully) self-explanatory. .a0 and .a1 are my original code and .f0 and .f1 represents my (failed) attempt to consolidate. Why can't I do a "for" loop (or, if I can, why do I always end up w/ value of "2" for i?)?</p>

<p>(If there's a way I can do it in jquery, that's fine)</p>

<p>See above fiddle for full demo:</p>

<pre><code>$(".a0").on("mouseenter",function(){
        $(this).html("value: 0");
});
$(".a1").on("mouseenter",function(){
        $(this).html("value: 1");
});

/* my failed attempt to consolidate the above code */
for (var i=0; i&lt;2; i++){ 
    $(".f"+i).on("mouseenter",function(){
        $(this).html("value: "+ i);
    });
}
</code></pre>
