title: How do I set the height of nested divs with jQuery?
body: <p>I'm using a <a href="https://github.com/filamentgroup/jQuery-Equal-Heights/blob/master/jQuery.equalHeights.js" rel="nofollow">simple jQuery function</a> to set the height of an immediate child  tag.  I need to modify this to go after nested  tags as well.  For instance:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="four columns"&gt;
          &lt;div class="panel green"&gt;
              // content panel 1 200px high based on content
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="four columns"&gt;
          &lt;div class="panel green"&gt;
              // content panel 2 250px high based on content
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="four columns"&gt;
          &lt;div class="panel green"&gt;
              // content panel 3 150px high based on content
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>For this row, all panels should be the same height.  Right now if I call <code>$('.four').equalHeights();</code> it will only set the height on the first content panel.  I need it to get the heights of panels 1, 2 and 3 then go back and set the max height of all panels in the row to the largest height in the row, in this case 250px.  </p>
  
  <p>If I try <code>$('row').equalHeights()</code> this doesn't work either.  </p>
  
  <p>I have tried setting <code>display: table-cell;</code> although adds additional overhead for styling.</p>
  
  <p>To clarify, for each "row" I need to set the height of all panels.  If I have 3 different rows, I don't want all of 9 panels to be set to the max height found in 1 row.  All rows are independent of each other.</p>