Jquery determining the total height of all children divs

Question

Hey, I have a div with 5 divs contained in it, I want to add all their heights together,

This is the solution in which I ended up using based on Jeff's answer. Thanks for helping me.

var ev_totalHeight = 0; $("#events > div").each(function(){ ev_totalHeight += $(this).innerHeight(); }); function events_open() { $("#events").animate({ "height": ev_totalHeight }, 450 ); } $("#events").click(function() { events_open(); }); 

Answer 1

Here is a fiddle: http://jsfiddle.net/yj8sL/2/

 $(function(){ var totalHeight = 0; $("#parent > div").each(function(){ totalHeight += $(this).height(); }); alert("Total height of all divs: "+totalHeight); }); 

As you can see, there are 5 sections with a height of 100 pixels each, so the total height is 500 pixels.

EDIT: Your next problem (with animation) is that you are not saying which block you are using (in your case, pixels):

  $("#events").animate({ "height": ev_totalHeight+"px" }, 450 ); 

Answer 2

Something like that:

 var height = 0; $('#events > div').each(function(){ height += $(this).height(); }); // apply calculated height to another element $('#myotherdiv').height(height + 'px'); 

Answer 3

Scroll them all and add height, for example.

 var height; $("#events").each(function() { height += $(this).height(); });