title: jQuery to set div height
body: <p>With the function below it allows me to set the divs to the max height using the specific class however I need to adjust it to allow me to set the height of each row dynamically.</p>
  
  <p><strong>Example:</strong></p>
  
  <p>The <code>menuBoxesParagraph</code> boxes within <code>row</code> could be a different height then the boxes within <code>rowX</code> I need to be able to get the <code>max</code> <code>.menuBoxesParagraph</code> height for each <strong>"row"</strong> and then be able to set the row height based on whatever the <code>max</code> is - I might have a .menuBoxesParagraph box that is 298px high - this would then be the highest box within that specific row - the row height should then be that height</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="menu1 menuBoxesParagraph"&gt;
          &lt;p&gt;Content Row&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="rowX"&gt;
      &lt;div class="menu1 menuBoxesParagraph"&gt;
          &lt;p&gt;Content Row X&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Current jQuery:</strong> </p>
  
  <pre><code> $(document).ready(function() {
        var max = -1;
      $('.menuBoxesParagraph').each(function() {
      var h = $(this).height(); 
      max = h &gt; max ? h : max;   
      });
      $(".menuBoxesParagraph").css("height",max+"px");
  
      }); 
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.menuBoxesParagraph{
      width: 25%;
      border: 10px solid #000;
      margin: 2% 1% 0px 0px;
      padding: 5px;
      text-align: center;
  }
  .menuBoxesParagraph:before, .menuBoxesParagraph:after { content: ""; display: table; }
  .menuBoxesParagraph:after { clear: both; }
  .menuBoxesParagraph { zoom: 1; }
  </code></pre>