Clever Geek Handbook

JQuery div height calculated separately

I have this code:

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

This code calculates every square even by length. But I want each box to be calculated separately by 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>
+1


source to share


3 answers


I figured 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");  
});
+1


source 


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


+1


source


In your current code, you are setting the entire CURRENT maxHeight value instead of the FINAL maxHeight value. If I understand what you intend to do right, try to split it 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.

0


source






More articles:


All Articles