title: How do I target elements within a class, without targeting elements in the same class used elsewhere? (jQuery)
body: <p>I've got a <code>floated</code> list of elements which I want the same <code>height</code> on. But there is more than one list per page, and they all use the same class-name. </p>
  
  <p>How to I reset the <code>tallest</code> 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?</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;ul class="thumbs"&gt;
     &lt;li class="thumb"&gt;
        &lt;img /&gt;
        &lt;p&gt;Some text&lt;/p&gt;
     &lt;/li&gt;
     &lt;li class="thumb"&gt;
        &lt;img /&gt;
        &lt;p&gt;Some text&lt;/p&gt;
     &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;!-- Same classnames, different content. Just an example, it's not 
       necessary with or without images                           --&gt;
  &lt;ul class="thumbs"&gt;
     &lt;li class="thumb"&gt;
        &lt;p&gt;Some text&lt;/p&gt;
        &lt;p&gt;Some more text&lt;/p&gt;
     &lt;/li&gt;
     &lt;li class="thumb"&gt;
        &lt;p&gt;Some text&lt;/p&gt;
     &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here's the jQuery <a href="http://www.cssnewbie.com/equalheights-jquery-plugin/" rel="nofollow noreferrer">equalHeights plugin</a> I'm using:</p>
  
  <pre><code>(function($) {
      $.fn.equalHeights = function(minHeight, maxHeight) {
          tallest = (minHeight) ? minHeight : 0;
          this.each(function() {
              if($(this).height() &gt; tallest) {
                  tallest = $(this).height();
              }
          });
          if((maxHeight) &amp;&amp; tallest &gt; maxHeight) tallest = maxHeight;
          return this.each(function() {
              $(this).height(tallest).css("overflow","auto");
          });
      }
  })(jQuery);
  </code></pre>
  
  <p>which I call with:</p>
  
  <pre><code>$(function() {
     $('.thumb').equalHeights();
  });
  </code></pre>
  
  <p>I also don't want to add new classes or id's to the markup.</p>
  
  <p>Thanks.</p>
  
  <p>Update - adding some examples of the different <code>&lt;li&gt;</code>'s I have. There are many, so not even sure if I've cought them all here:</p>
  
  <pre><code>&lt;ul class="thumbs"&gt;
  &lt;li class="thumb first"&gt;
      &lt;p class="boxHeading"&gt;Featured collection&lt;/p&gt;
      &lt;h3&gt;&lt;a class="boxFeatured" href="#"&gt;Dining chair &lt;span class="by"&gt;by bowline&lt;/span&gt;&lt;/a&gt;&lt;/h3&gt;
      &lt;div class="img"&gt;
          &lt;img src="media/dummy/diningChair.jpg" width="250" height="180" alt="Dining chair" /&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul class="thumbs"&gt;
  &lt;li class="thumb"&gt;
      &lt;div class="img"&gt;
          &lt;img src="media/dummy/diningChair3.jpg" width="204" height="156" alt="DiningChair3" /&gt;
      &lt;/div&gt;
      &lt;h4 class="readMore"&gt;&lt;a class="readMore" href="link/that/biggerlink.js/follows"&gt;Product name&lt;/a&gt;&lt;/h4&gt;
      &lt;dl class="boxDescription"&gt;
          &lt;dt&gt;By:&lt;/dt&gt;
          &lt;dd&gt;&lt;a href="#"&gt;Vincent Shephard&lt;/a&gt;&lt;/dd&gt;
          &lt;dt&gt;Colour:&lt;/dt&gt;
          &lt;dd&gt;brown, white&lt;/dd&gt;
          &lt;dt&gt;Price:&lt;/dt&gt;
          &lt;dd&gt;$XXX.XX&lt;/dd&gt;
      &lt;/dl&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul class="thumbs"&gt;
  &lt;li class="thumb"&gt;
      &lt;h3 class="boxHeading"&gt;&lt;a href="#"&gt;Featured collection&lt;/a&gt;&lt;/h3&gt;
      &lt;div class="img"&gt;
          &lt;img src="media/dummy/diningChair.jpg" width="232" height="180" alt="Dining chair" /&gt;
      &lt;/div&gt;
      &lt;p class="readMore"&gt;
          In one word, you reproach us with intending 
          to do away with your property.  Precisely so; 
          that is just what we intend.
      &lt;/p&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul class="thumbs"&gt;
  &lt;li class="thumb first"&gt;
      &lt;h3 class="boxHeading"&gt;&lt;a href="#"&gt;Tables (category)&lt;/a&gt;&lt;/h3&gt;
      &lt;div class="img"&gt;
          &lt;img src="media/dummy/diningChair.jpg" width="232" height="180" alt="Dining chair" /&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul class="thumbs"&gt;
  &lt;li class="thumb first"&gt;
      &lt;h4 class="small"&gt;&lt;a class="small" href="test.html"&gt;Product name&lt;/a&gt;&lt;/h4&gt;
      &lt;div class="img"&gt;
          &lt;img src="media/dummy/diningChair.jpg" width="204" height="156" alt="Dining chair" /&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul class="thumbs"&gt;
  &lt;li class="thumb dropShadow offwhite first center"&gt;
      &lt;div class="img"&gt;
          &lt;img src="media/dummy/recent1.jpg" width="134" height="180" alt="Advertisement1" /&gt;
      &lt;/div&gt;
      &lt;h4 class="small bold"&gt;&lt;a class="small bold"&gt;Inside Out&lt;/a&gt;&lt;/h4&gt;
      &lt;p&gt;July 2009&lt;/p&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>That <em>should</em> cover all of them, although I might have missed some. Thanks for your patience. </p>