title: Matching Rel Attributes with Jquery
body: <p>First, please see <a href="http://doctype.com/matching-rel-attributes" rel="nofollow noreferrer">this post on Doctype</a></p>
  
  <p>I've been trying to get an answer to this, but have not been successful.  The script that the first poster provided works great but, I need this to happen automatically, for all groups of matching Rel's.</p>
  
  <p>Any assistance would be greatly appreciated.</p>
  
  <p>EDIT:
  For those of you unable to follow the link above, here is the script:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;&lt;title&gt;match rel&lt;/title&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(function() {
    $("input[type='button']").click(function(){
      $(".photo img").show().css('background','transparent'); //restore visibility
      matchImg($("#relval").val());
    });
  });
  
  function matchImg(relVal){
      var sel = ".photo img[rel='" + relVal + "']";
      if ($(sel).length &gt; 0) { //check matching rel
          $(sel + ":gt(0)").hide(); //hide all except first
          $(sel + ":first").css('background','red'); //set background to first
      }
  }
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
  .photo img {
      padding: 5px;
      float: left;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="photo"&gt;
  &lt;img rel="dt" src="http://doctype.com/images/logo-small.png" alt="1" /&gt;
  &lt;img rel="dt" src="http://doctype.com/images/logo-small.png" alt="2" /&gt;
  &lt;img rel="dt" src="http://doctype.com/images/logo-small.png" alt="3" /&gt;
  &lt;img rel="so" src="http://sstatic.net/so/img/logo.png" alt="4" /&gt;
  &lt;img rel="so" src="http://sstatic.net/so/img/logo.png" alt="5" /&gt;
  &lt;/div&gt;
  &lt;p style="clear: both;"&gt;
  Enter 'dt' or 'so' &lt;input type="text" value="dt" id="relval" /&gt;
  &lt;input type="button" value="match" /&gt;
  &lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Basically, I'm taking a grid-layout of photos and modifying them. Some photos are related and some are not. The ones that are related will have matching Rel attributes. I would like jquery to recognize a group of related images (with the same rel), hide all of the images except the first and apply a background image to the container of the first photo (not finalized yet but, it will likely be a div or li).</p>
  
  <p><strong>This script already does this.</strong></p>
  
  <p>However, I need the script to do this automatically, with all matching rel groups, without me having to enter in the rel attribute.</p>