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

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

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

Answer 2

More modern option:

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

Answer 3

Try this:

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

Answer 4

You can also be lazy as me and introduce a new jQuery function that will do all the work for you, like this:

(function($) {    
    $.fn.sumOfOuterHeights = function () {
        var sum = 0;
        $(this).each(function () {
            sum += $(this).outerHeight();
        });
        return sum;
    };
})(jQuery);

And then use it in your code wherever you like it:

var height = $('.a, .b, .c').sumOfOuterHeights();

For me it is also a little bit more readable and DRY if you use it often.

Answer 5

$("selector") is already a collection. Access directly the .outerHeight() or any other method like .height()

var total = 0;
$("div").outerHeight(function(i, v){
   total += v;
});

alert( total ); // Just to test

var total = 0;

$("div").outerHeight(function(i, v){ total += v; });

alert( total );

div{background:#eee; margin:3px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:100px;">100px</div>
<div>just lots of breaklines :)<br><br><br><br></div>
<div style="height:200px;">200px</div>

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