21

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?

1
  • 3
    You've asked a few question here at SO but you've never accepted an answer. You should accept an answer (check mark next to the numbers) if one of the answers helped you. Jun 23, 2012 at 1:09

9 Answers 9

36

Loop through each matching element and add up the outerheights:

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

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 a reduce and made into a plugin like: http://jsfiddle.net/mendesjuan/bKtAn/9/

(function( $ ) {
    $.fn.reduce = function(cb, init) {  
      return Array.prototype.reduce.call(this, function(a,b){
            return cb(a, b);
      }, init);  
    }
})(jQuery);

const total = $('span').reduce(
   (accumulator, current) => accumulator + $(current).height(),
   0
);
console.log({total});

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

1
  • 2
    @downvoter: It'd be nice to explain why you thought this answer wasn't useful! Jun 23, 2012 at 2:10
6

$("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>

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

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

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();
});
3
  • The params passed to $('selector').each are not the same as the params passed to $.each. There's no e parameter, this refers to the HTML element Jun 23, 2012 at 0:10
  • You are completely wrong. api.jquery.com/each even lists the signature as .each( function(index, Element) ) You can test to see that e exists if you like. (this is available as well) Jun 23, 2012 at 1:56
  • My bad, I assumed it from the description on api.jquery.com/jQuery.each "The $.each() function is not the same as $(selector).each(), " They are not the same but they both do pass the element as the second parameter. The only difference is that $(selector).each() sets this to the same thing as the second parameter. Jun 23, 2012 at 2:15
2

Try this:

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

You can use get an array of the native elements and reduce to get the sum.

This might be cleaner because it's one line without the need to declare a variable in advance.

const height = $('div').get().reduce((prev, curr) => prev + curr.offsetHeight, 0);
console.log(height);
.child1 {
  height: 30px;
  background: red;
}

.child2 {
  height: 50px;
  background: green;
}

.child3 {
  height: 10px;
  background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>

This approach can be used without jQuery of course. The [...] thing is to convert NodeList to an array of elements)

const height = [...document.querySelectorAll('div')].reduce((prev, curr) => prev + curr.offsetHeight, 0);
console.log(height);
.child1 {
  height: 30px;
  background: red;
}

.child2 {
  height: 50px;
  background: green;
}

.child3 {
  height: 10px;
  background: blue;
}
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>

0

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.

0

More modern option:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.