title: jQuery .each() only applying to last element
body: <p>I've seen lots of answers to similar questions, but can't seem to get this figured out for my specific case.  My jQuery logic is only applying to the last element in my <code>.each()</code> function.  Can anyone help me understand why?  Ultimately, I'm trying to split the items in my lists into two columns.</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;ul class="sub-menu"&gt;
      &lt;li&gt;item 1&lt;/li&gt;
      &lt;li&gt;item 2&lt;/li&gt;
      &lt;li&gt;item 3&lt;/li&gt;
      &lt;li&gt;item 4&lt;/li&gt;
      &lt;li&gt;item 5&lt;/li&gt;
      &lt;li&gt;item 6&lt;/li&gt;
      &lt;li&gt;item 7&lt;/li&gt;
      &lt;li&gt;item 8&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul class="sub-menu"&gt;
      &lt;li&gt;item 1&lt;/li&gt;
      &lt;li&gt;item 2&lt;/li&gt;
      &lt;li&gt;item 3&lt;/li&gt;
      &lt;li&gt;item 4&lt;/li&gt;
      &lt;li&gt;item 5&lt;/li&gt;
      &lt;li&gt;item 6&lt;/li&gt;
      &lt;li&gt;item 7&lt;/li&gt;
      &lt;li&gt;item 8&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul class="sub-menu"&gt;
      &lt;li&gt;item 1&lt;/li&gt;
      &lt;li&gt;item 2&lt;/li&gt;
      &lt;li&gt;item 3&lt;/li&gt;
      &lt;li&gt;item 4&lt;/li&gt;
      &lt;li&gt;item 5&lt;/li&gt;
      &lt;li&gt;item 6&lt;/li&gt;
      &lt;li&gt;item 7&lt;/li&gt;
      &lt;li&gt;item 8&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And here's my jQuery</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  jQuery(document).ready(function(){
  
          var col1 = jQuery('&lt;li class="col1"&gt;col1&lt;/li&gt;'); // object which I will append the list items into
          var col2 = jQuery('&lt;li class="col2"&gt;col2&lt;/li&gt;'); // object which I will append the list items into
  
          jQuery('.sub-menu').each(function() {
              var items = jQuery(this).html(); // get original items from list
              jQuery(this).empty(); // clear original items from list
  
              jQuery(this).append(col1).append(col2); // just appending new columns for now, will add the original items to either col1 or col2 once this is working.
          });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>My code properly captures the original list items and clears the current <code>.sub-menu</code> list, but then adding the columns into the list is only happening for the last element in the <code>.each()</code> loop.  In other words the two columns are only getting added to the last <code>.sub-menu</code> and the first two end up with no list items.</p>
  
  <p>Ideas?</p>