JQuery Equal Heights Tests

by DannyEnglander

HTML

<script src="http://www.cssnewbie.com/download/jquery.equalheights.js"></script>
<div class="item-list row-1">
    <h2>Row 1</H2>
<ul>
    <li><img src="http://lorempixel.com/150/256/nature/1/"></li>
    <li><img src="http://lorempixel.com/150/220/nature/3/"></li>
    <li><img src="http://lorempixel.com/150/190/nature/8/"></li>   
</ul>

</div>

<div class="item-list row-2">
<h2>Row 2</H2>
<ul>
    <li><img src="http://lorempixel.com/150/152/nature/4/"></li>
    <li><img src="http://lorempixel.com/150/120/nature/7/"></li>
    <li><img src="http://lorempixel.com/150/135/nature/10/"></li>      
</ul>
</div>

CSS

li {
 float: left;  
 margin-right: 5px; 
background-color: lightBlue;    
}

.item-list {
  clear: both;
  float: none;
}

JavaScript

// Apply heights to li ags within UL groups.

$(".item-list ul").each(function() {
    $(this).find('li').equalHeights(50,400);
});

 
/* 
Or forget the plugin above and grab the highest measurement of the li tags within a UL group and apply it to the parent <ul>

The issue is that the same height (from the first ul group) is applied to the all ULs when in reality the first group (row 1) should be 260px and the second (row 2) should be 156px

*/

function thisHeight(){
    return $(this).height();
}

$(".item-list ul").each(function() {
    var thisULMax = Math.max.apply(Math, $(this).find("li").map(thisHeight));
    $(this).height(thisULMax);
});