title: Merging two unordered lists of first and last names
body: <p>I'm attempting to merge two lists. One is a list of first names and the second is a list of last names. I'd like to figure out what the best approach with jQuery</p>
  
  <p>I have this:</p>
  
  <pre><code>&lt;ul class="first-names"&gt;
      &lt;li&gt;John&lt;/li&gt;
      &lt;li&gt;Betty&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul class="last-names"&gt;
      &lt;li&gt;Doe&lt;/li&gt;
      &lt;li&gt;White&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I'd like this:</p>
  
  <pre><code>&lt;ul class="full-names"&gt;
      &lt;li&gt;John Doe&lt;/li&gt;
      &lt;li&gt;Betty White&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>So far I've tried this and it isn't even close to working:</p>
  
  <pre><code>$( "ul.last-names li" ).text(function( index ) {
      $('u.first-names li').append(this).text();
  });
  $("ul.first-names").removeClass("first-names").addClass("full-names");
  </code></pre>
  
  <p>It ends up with:</p>
  
  <pre><code>&lt;ul class="full-names"&gt;
      &lt;li&gt;John&lt;/li&gt;
      &lt;li&gt;Doe&lt;/li&gt;
      &lt;li&gt;White&lt;/li&gt;
      &lt;li&gt;White&lt;/li&gt;
      &lt;li&gt;Betty&lt;/li&gt;
      &lt;li&gt;Doe&lt;/li&gt;
      &lt;li&gt;White&lt;/li&gt;
      &lt;li&gt;White&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Thanks!</p>