How do I target elements within a class, without targeting elements in the same class used elsewhere? (jQuery)

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();
});