title: jQuery Equal Height Divs
body: <p>If i have the following markup;</p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;div id="box"&gt;
      &lt;div id='sameHeight'&gt;One&lt;br&gt;two&lt;br&gt;three&lt;/div&gt;
      &lt;div id='sameHeight'&gt;four&lt;/div&gt;
      &lt;div id='sameHeight'&gt;five&lt;/div&gt;        
    &lt;div&gt;
    &lt;div id="box"&gt;
      &lt;div id='sameHeight'&gt;four&lt;/div&gt;
      &lt;div id='sameHeight'&gt;six&lt;/div&gt;
      &lt;div id='sameHeight'&gt;seven&lt;br&gt;eight&lt;/div&gt;
    &lt;div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I ensure that all divs marked as "sameHeight" are the same height as their counterparts in the other div?</p>
  
  <p>I had a look at the equalHeights plugin but that assumes all divs side by side are in the same parent.  I need one that can either traverse parents or allow me to specify parents.</p>
  
  <p>Is there such a thing or do I need to write it?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I seem to have caused some confusion in my explanation so I hope this clears things up a little.</p>
  
  <p>Looking at the new markup, the container is a simple box.</p>
  
  <p>The "box" divs sit side by side.</p>
  
  <p>Each sameheight div then sits one under the other within its parent.</p>
  
  <p>The thing i'm trying to solve is to have each of the sameHeights that match to it's opposite side the same height.</p>
  
  <p>it should look like a grid i guess w/out using a grid.</p>
  
  <p>I hope this helps.</p>
  
  <p><strong>EDIT 2</strong></p>
  
  <p>This is so far what I have come up with but is there a better way?</p>
  
  <pre><code>function SetHeights() {
      var numLines = $('#container&gt;div:eq(0) .sameHeight').length;
  
      for (var t = 0; t &lt; numLines; t++) {
          var leftHeight = $('#container&gt;div:eq(0) .sameHeight:eq(' + t + ')').outerHeight();
          var rightHeight = $('#container&gt;div:eq(1) .sameHeight:eq(' + t + ')').outerHeight();
  
          if (leftHeight &gt; rightHeight) {
              $('#container&gt;div:eq(1) .sameHeight:eq(' + t + ')').css({ height: leftHeight });
          }
          else {
              $('#container&gt;div:eq(0) .sameHeight:eq(' + t + ')').css({ height: rightHeight });
          }
      }
  }
  </code></pre>