Using `this` in a loop to target current item
<p>I've got this jsfiddle set up with my issue: <a href="http://jsfiddle.net/7MjN6/" rel="nofollow">http://jsfiddle.net/7MjN6/</a></p>

<p>As you can see, I have two images. I want the divs surrounding each to expand when each is clicked on. I'm attempting to use the <code>this</code> object to ensure that clicking on an image only expands that image's div, but I'm sure I'm using <code>this</code> wrong because it's not connecting. It would be much appreciated if someone could take a stab at my fiddle!</p>

<p>HTML:</p>

<pre><code>&lt;body&gt;
    &lt;div class="img-container"&gt;
        &lt;a href="#"&gt;&lt;img src="http://blueantlabs.com/wp-content/themes/blueantplate/img/port-wide/thefutureproject-605.png" /&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="img-container"&gt;
        &lt;a href="#"&gt;&lt;img src="http://blueantlabs.com/wp-content/themes/blueantplate/img/port-wide/thefutureproject-605.png" /&gt;&lt;/a&gt;
    &lt;/div&gt;
&lt;/body&gt;​
</code></pre>

<p>JS:</p>

<pre><code>$(function(){
    $('.img-container').each(function(index){
        var imgHeight = $(" a img").height();
        $('a').click(function(e){
            e.preventDefault;
            $('div').animate({height: imgHeight});
        });
    });     
});​
</code></pre>
