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

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.