Get the sum of the outerHeight of all elements of

Question

I think this is a pretty straightforward problem but...

var outerHeight = $('.profile').outerHeight();
$("#total-height").text(outerHeight + 'px');

Right now the var outerHeight gives me the outerHeight of only the first element with the class .profile.

How can I get the sum of the outerHeights of all elements with the class .profile?

Answer 1

jQuery functions that don't return a jQuery object operate only on the first member of a list.

If you want to iterate over all .profile elements, you can use .each()

var totalHeight = 0;
$('.profile').each(function(i, e) {
    totalHeight += $(e).outerHeight();
});

Answer 2

Loop through each matching element and add up the outerheights:

var outerHeight = 0;
$('.profile').each(function() {
  outerHeight += $(this).outerHeight();
});
$("#total-height").text(outerHeight + 'px');