Shane Shane - 4 months ago 8
HTML Question

How to get height of a mapped object

I have three jQuery objects in an array, like so:

<div class="object"></div>
<div class="object"></div>
<div class="object"></div>

<script>
var arr = $('.object');
</script>


And I want to use
$.map()
to find the heights of each and store them in an array, like this:

var arrElHeights = $.map(arr, function(a){
return a.height();
});


How would I accomplish this? Should I be iterating through via another method instead?

Answer

You have the right idea. The problem is that height is not a function. What you want to do is to get the clientHeight of the element. Try something like this:

 var arrElHeights = $.map(arr, function(a){
    return a.clientHeight;
});

Here is some info on clientHeight : https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight

and also the docs on offsetHeight : https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

Jquery .height() does not include padding