JQuery getting width and height of next image element
<p>I am not much into JQuery background, so it's a little difficult to make a simple thing work.</p>

<p>I have my HTML element as:</p>

<pre><code>&lt;div id="content"&gt;
    &lt;div class="box mosaic-block bar"&gt;
        &lt;img src="images/products-mansonary/img1.jpg" /&gt;
        &lt;div class="overlay_brand"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="box"&gt;
        &lt;img src="images/products-mansonary/img2.jpg" /&gt;
    &lt;/div&gt;
    &lt;div class="box"&gt;
        &lt;img src="images/products-mansonary/img3.jpg" /&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I want to loop this div with id content, and get the height and width of the images:</p>

<pre><code>  $(document).ready(function() {
    $('#content').children('.box').each(function() {
        console.log($(this).html());
        var img_height = $(this).next("img").height();
        var img_width = $(this).next("img").width();
        //console.log($(this).children().width());
        //console.log(img_height + "    " + img_width)
        console.log($($(this).next('img').html()));
        return false;
    });

    //$(".overlay_brand")
});
</code></pre>

<p>For the time being, I am returning false to run the loop just once.</p>

<p>When I say <code>console.log($(this).html())</code> I get :</p>

<pre><code>&lt;img src="http://localhost:5643/Template/images/products-mansonary/img1.jpg"&gt;&lt;div class="overlay_brand"&gt;&lt;/div&gt;
</code></pre>

<p>I hope I am not doing something silly.</p>
