Get the sum of the outerHeight of all elements of the same class

Question

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

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


        

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

Try this:

var outerHeightTotal = 0;
$('.profile').each(function(){
  outerHeightTotal += $(this).outerHeight();
});

Answer 3

var total = 0;
$('.profile').each(function() {
     total += $(this).outerHeight();
});

$("#total-height").text(total + 'px');

Answer 4

More modern option:

let height = 0
$('.profile').each((i, el) => height += $(el).outerHeight())

Answer 5

Loop through each matching element and add up the outerheights:

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

Answer 6

Here's the straight forward solution. Just loop through the elements of the jQuery object summing up the outerHeight()s.

var total = 0;
$('.profile').each(function(){
    total += $(this).outerHeight();
});
// total is good here

The important thing is that all jQuery getters only return the value of the first element in the jQuery set but you can add them yourself.

And here's a roundabout but cool way of doing it http://jsfiddle.net/mendesjuan/bKtAn/6/

// You can use a jQuery object as the `this` param in `Array.prototype` functions
var totalHeight = Array.prototype.reduce.call($('span'), function(a,b){
   // The first param is either the default value (passed into reduce)
   // or the result of the last call of this reducing function
   return a + $(b).outerHeight();
}, 0);

Which could be generalized as http://jsfiddle.net/mendesjuan/bKtAn/7/

function addjQValues($jq, getter) {
    return Array.prototype.reduce.call( $jq, function (a, b) {
        return a+ getter.call($(b));
    }, 0);  
}
addjQValues($('span'), $.fn.height)

And made into a plugin like: http://jsfiddle.net/mendesjuan/bKtAn/9/

(function( $ ) {
    $.fn.addUp = function(getter) {  
      return Array.prototype.reduce.call(this, function(a,b){
            return a + getter.call($(b));
      }, 0);  
    }
})(jQuery);
$('span').addUp($.fn.height);
$('span').addUp($.fn.width);
$('span').addUp($.fn.text);

I think I went a bit overboard, sorry, I got excited, but these code snippets teach you a lot about JS and even a bit of jQuery