title: Jquery - Apply class to highest value multiple times
body: <p>I have the following table structure which results come from two seperate php queries.</p>
  
  <pre><code>&lt;tr&gt;
  &lt;td&gt;Item 1&lt;/td&gt;
  &lt;td&gt;&amp;pound;&lt;?=$row1['item_1']?&gt;&lt;/td&gt;
  &lt;td&gt;&amp;pound;&lt;?=$row2['item_1']?&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;Item 2&lt;/td&gt;
  &lt;td&gt;&amp;pound;&lt;?=$row1['item_2']?&gt;&lt;/td&gt;
  &lt;td&gt;&amp;pound;&lt;?=$row2['item_2']?&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;Item 3&lt;/td&gt;
  &lt;td&gt;&amp;pound;&lt;?=$row1['item_3']?&gt;&lt;/td&gt;
  &lt;td&gt;&amp;pound;&lt;?=$row2['item_3']?&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>What I'm trying to do is within each row highlight the highest number pulled from the database.</p>
  
  <p>Any help is appreciated!</p>
  
  <p>UPDATE</p>
  
  <p>I've added the following code to the page but can't for the life of me get it working. I can see it working on jsFiddle but I must be doing something wrong. Help please</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js "&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  jQuery(function($) {
      $.fn.max = function(callback) {
          var max = null,
              maxIndex = null;
  
          this.each(function() {
              var value = callback.call(this);
              if (+value === value) {
                  if (!max || value &gt; max) {
                      max = value;
                      maxIndex = $(this).index();
                  }
              }
  
          });
          return max !== null ? this.eq(maxIndex) : $();
      };
  }(jQuery));
  
  
  $('tr').each(function() {
      $(this).children('td').max(function() {
          var value = +$(this).text().substr(1);
          if (!isNaN(value)) {
              return value;
          }
      }).addClass('red');
  });
  &lt;/script&gt;
  </code></pre>