Question

I am not much into JQuery background, so it’s a little difficult to make a simple thing work.

I have my HTML element as:

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

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

  $(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")
});

For the time being, I am returning false to run the loop just once.

When I say console.log($(this).html()) I get :

<img src="http://localhost:5643/Template/images/products-mansonary/img1.jpg"><div class="overlay_brand"></div>

I hope I am not doing something silly.

Answer 1

Try find() instead of next()

$('#content').children('.box').each(function() {
       console.log($(this).html());
       var img_height = $(this).find("img").height();
       var img_width = $(this).find("img").width();

       alert(img_height + "    " + img_width)


    });

Demo