Question

I’ve got a floated list of elements which I want the same height on. But there is more than one list per page, and they all use the same class-name.

How to I reset the tallest variable for each list so they don’t all inherit the height from the tallest list-item on the page, but only from within it’s own list?

Here’s my HTML:

<ul class="thumbs">
   <li class="thumb">
      <img />
      <p>Some text</p>
   </li>
   <li class="thumb">
      <img />
      <p>Some text</p>
   </li>
</ul>

<!-- Same classnames, different content. Just an example, it's not 
     necessary with or without images                           -->
<ul class="thumbs">
   <li class="thumb">
      <p>Some text</p>
      <p>Some more text</p>
   </li>
   <li class="thumb">
      <p>Some text</p>
   </li>
</ul>

Here’s the jQuery equalHeights plugin I’m using:

(function($) {
    $.fn.equalHeights = function(minHeight, maxHeight) {
        tallest = (minHeight) ? minHeight : 0;
        this.each(function() {
            if($(this).height() > tallest) {
                tallest = $(this).height();
            }
        });
        if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
        return this.each(function() {
            $(this).height(tallest).css("overflow","auto");
        });
    }
})(jQuery);

which I call with:

$(function() {
   $('.thumb').equalHeights();
});

I also don’t want to add new classes or id’s to the markup.

Thanks.

Update – adding some examples of the different <li>‘s I have. There are many, so not even sure if I’ve cought them all here:

<ul class="thumbs">
<li class="thumb first">
    <p class="boxHeading">Featured collection</p>
    <h3><a class="boxFeatured" href="#">Dining chair <span class="by">by bowline</span></a></h3>
    <div class="img">
        <img src="media/dummy/diningChair.jpg" width="250" height="180" alt="Dining chair" />
    </div>
</li>
</ul>

<ul class="thumbs">
<li class="thumb">
    <div class="img">
        <img src="media/dummy/diningChair3.jpg" width="204" height="156" alt="DiningChair3" />
    </div>
    <h4 class="readMore"><a class="readMore" href="link/that/biggerlink.js/follows">Product name</a></h4>
    <dl class="boxDescription">
        <dt>By:</dt>
        <dd><a href="#">Vincent Shephard</a></dd>
        <dt>Colour:</dt>
        <dd>brown, white</dd>
        <dt>Price:</dt>
        <dd>$XXX.XX</dd>
    </dl>
</li>
</ul>

<ul class="thumbs">
<li class="thumb">
    <h3 class="boxHeading"><a href="#">Featured collection</a></h3>
    <div class="img">
        <img src="media/dummy/diningChair.jpg" width="232" height="180" alt="Dining chair" />
    </div>
    <p class="readMore">
        In one word, you reproach us with intending 
        to do away with your property.  Precisely so; 
        that is just what we intend.
    </p>
</li>
</ul>

<ul class="thumbs">
<li class="thumb first">
    <h3 class="boxHeading"><a href="#">Tables (category)</a></h3>
    <div class="img">
        <img src="media/dummy/diningChair.jpg" width="232" height="180" alt="Dining chair" />
    </div>
</li>
</ul>

<ul class="thumbs">
<li class="thumb first">
    <h4 class="small"><a class="small" href="test.html">Product name</a></h4>
    <div class="img">
        <img src="media/dummy/diningChair.jpg" width="204" height="156" alt="Dining chair" />
    </div>
</li>
</ul>

<ul class="thumbs">
<li class="thumb dropShadow offwhite first center">
    <div class="img">
        <img src="media/dummy/recent1.jpg" width="134" height="180" alt="Advertisement1" />
    </div>
    <h4 class="small bold"><a class="small bold">Inside Out</a></h4>
    <p>July 2009</p>
</li>
</ul>

That should cover all of them, although I might have missed some. Thanks for your patience.

Answer 1

$('.thumbs').each(function(){
    $('.thumb', this).equalHeights();
});