title: Iterate in order different list items to match height
body: <p>I'm looking to standardize rows of 3 lists.</p>
  
  <p>What I'm trying to figure out is how to iterate row by row to make the heights equal as they appear on the front end.<br>
  The number of items will always be equal and would like to make the height of each <code>li</code> equal based on largest in each iteration.</p>
  
  <p>So for example :</p>
  
  <pre><code>&lt;div class="column-1-here"&gt;
    &lt;ul&gt;
      &lt;li&gt;Test&lt;br /&gt;Test&lt;br/&gt;Test&lt;li&gt;
      &lt;li&gt;test&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  /*These lists are aligned side by side and I'd like to make sure the heights are equal. It's also possible I'd add another 1 or 2 lists.*/
  &lt;div class="column-2-here"&gt;
    &lt;ul&gt;
      &lt;li&gt;Test&lt;/li&gt;
      &lt;li&gt;Test&lt;br /&gt;Test&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any base ideas on how this would be tackled if I'm looking to run <code>.each()</code> in almost a comparative way?</p>
  
  <p>This is what I have so far. The issue at this point is the height isn't adjusting to the largest height. Again these are in order – so the first li in column-1-here should be the same height as the first li in column-2-here :</p>
  
  <pre><code>var listItems = $("#firstTab li");
  var max_height = 0;
  listItems.each(function() {
    if( $(this).height() &gt; max_height )
      max_height = $(this).height();  
      // and the rest of your code
      listItems.css( "height", max_height+'px' );
  });
  </code></pre>