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/output/nature-h-c-153-256-3.jpg"></li>
    <li><img src="http://lorempixel.com/output/nature-q-c-153-113-5.jpg"></li>
    <li><img src="http://lorempixel.com/output/nature-h-c-153-221-1.jpg"></li>    
</ul>

</div>

<div class="item-list row-2">
<h2>Row 2</H2>
<ul>
    <li><img src="http://lorempixel.com/output/nature-q-c-200-95-2.jpg"></li>
    <li><img src="http://lorempixel.com/output/nature-q-c-169-152-1.jpg"></li>
    <li><img src="http://lorempixel.com/output/nature-q-c-169-96-3.jpg"></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

*/

// get the height of the tallest LI within each UL group

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

/* 

now render the height in each parent UL
-- not working yet

$(".item-list ul li").each(function() {
  $(this).find(".item-list ul").height(max);
});
*/

// this does not seem to grab unique instanaces and put them in each parent UL group.

$(".item-list ul").height(max);