how to calculate height of elements inside a div in jquery?

I have a div which contains number of elements which user can drag and drop to rearrange inside. Also, he can add new elements from tool bar. I want to increase height of outer div to 开发者_运维知识库wrap all those elements. Now they overlap on footer. The challenges I fighting with are - 1. How to find elements which are placed below other. All the elements are have relative positions. 2. Change of height needs to be handled on drop of an element.

I need solution very urgently.

Thanks

Maybe something like this?

var height = 0;
$("div > *").each(function () {
  height += $(this).height();
})

In this case you can use the Array.prototype.reduce method to simplify the solution into a single line:

        var innerHeight = $("#parentDIV").children().reduce(function(a, b){
            return $(a).height() + $(b).height(); 
        });

The reduce method is useful in general, and it is supported by most modern browsers. To ensure compatibility, you can easily add the method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Best way I think is this:

for the first create elements for div

var divToShow = " < div id='addNEWpop' > ";

then put all your elements in it, then append it to your body

$(document.body).append(divToShow);

now lets get height of div

heightS=$('[id^="addNEWpop"]').height();

before you show it make css

$("#addNEWpop").css({width:"400px",height:heightS+"px",display: "none", })

and finally

$('[id^="addNEWpop"]').show("slow");