Child element's width is undefined

Question

code:

$(".article-image").each(function(){
    var imgW = $(this).children("img").naturalWidth;
    console.log(imgW);
})

$(this).children("img”).length is 1, however imgW is undefined.

I've also tried:

$(this).children("img").scrollWidth;

And this was 0:

$(this).children("img").width();

Answer 1

I was trying to read the image width before it loaded. So this is what I did:

$(".article-image").each(function(){
    $(this).children("img").load(function(){
        var imgH = $(this).parent().children("img").height();
})

Answer 2

Use outerWidth

$(".article-image").each(function(){
   var imgW = $(this).children("img").outerWidth;
   console.log(imgW);
})

Answer 3

Try:

$(this).find("img").eq(0).css("width");

If you need width of specific element, you can give the element class name:

$(this).find(".className").css("width");