jQuery div height calculate separately

I have this code:

var maxHeight = 0;
$('div.height').each(function() { ma开发者_StackOverflow社区xHeight = Math.max(maxHeight, $(this).height());      }).height(maxHeight);

This code calculate each box even in length. But I want each box calculate separately in length. How can i do this?

My HTML

<div class="height"> 
     <div class="overlay height"></div>
     Content
</div>

<div class="height"> 
     <div class="overlay height"></div>
     Content
</div>

$('div.height').each(function() { 
    maxHeight = Math.max(maxHeight, $(this).height());    
    $(this).height(maxHeight);  
})

I have figure it out myself and this is the solution:

$('div.height').each(function() { 
    hParent = $(this).height();
    hChild = $(this).find('div.overlay').height();
    maxHeight = Math.max(hParent, hChild);    
    $(this).height(maxHeight);
    $(this).find('div.overlay').css("height",(maxHeight-72)+"px");  
});

In your current code you are setting everything to the CURRENT value of maxHeight instead of the FINAL value of maxHeight. If I understand that you intend to do correctly, then try separating it out as such:

var maxHeight = 0;

$('div.height').each(function() { maxHeight = Math.max(maxHeight, $(this).height()); });

$('div.height').height(maxHeight);

This will apply the final maxHeight to all divs.