Question

For example, I have 20 items all the same height, all the same class “some_class”.
The first item of the twenty has an id of “first_item”.

When I do $('.some_class').height(); I get 0 (which is wrong). But when I do $('#first_item').height(); it works and I get a value.

This baffles me. Why might this be? I can’t really share the web page because its a private page.

EDIT: Interesting to note that .width() works just fine, and I get the same value calling it on #first_item or ‘.some_class’.

Answer 1

Because you’ll probably find that the class selector is returning more than one element. In this case, height() returns the value of the first element (this is consistent throughout the jQuery get methods); which is probably not the one you want.

If you want the height of each of the element, you should iterate over them with each;

$('.some_class').each(function () {
    var myHeight = $(this).height();
});

jQuery height docs;

Get the current computed height for the first element in the set of matched elements.