Using jQuery each to grab image height

Answer 1

Use this:

imageWidth = $(this).children("img").attr("width")

The following selects all your images:

$(".thumb img")

... so when you ask for the attribute it returns it from the first object in the collection

Sorry for all the edits... but it is best to reuse jquery objects, so:

var $this = $(this)

Then refer to $this were needed for optimization. Not that big a deal in this example, but it is a good practice to use.

Answer 2

You won't be able to use document.ready() to do this as the images will not have loaded by the time that is called.

You actually need to put this code into the onload() event handler, which is called after the document and all images have finished loading.

It is only when the images have finished loading that the browser knows how big they are.

Answer 3

$().ready(function() {

        $(".thumb img").load(function() {
            var imageHeight = $(this).height();
            $(this).parent().append(imageHeight);

        });

});