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 class="ul-group">
    <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 class="ul-group">
    <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; 
 
}

ul {
        background-color: lightBlue;   
}

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

JavaScript

// Get heights of li tags within UL groups.


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

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