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 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;
}

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;
}