title: Combine Navigation UL jQuery Function
body: <p>I am trying to write a function that will combine two children <code>ul#level_2</code>and append them to their parent <code>li#level_1</code> within a dropdown <code>#navigation</code>.</p>
  
  <p>I currently have the following which does the job, but it means I have to manually target each category. I'm sure there is a far shorter way to produce the same results with very little code.</p>
  
  <pre><code>$('li#furniture ul.level_2').children('li').appendTo('li#furniture ul.level_2:first');
  $('li#furniture ul.level_2').children('li').not(':first').remove();
  </code></pre>
  
  <p>Here is a shortened version of my current html structure &amp; below is the desired result:</p>
  
  <p><strong>Simple Current HTML</strong></p>
  
  <pre><code>&lt;div id="navigation"&gt;
      &lt;ul id="level_1"&gt;
          &lt;li class="level_1"&gt;
              &lt;div class="subnav_wrapper"&gt;
                  &lt;ul class="level_2"&gt;
                      &lt;li class="level_2"&gt;
                          &lt;a href="#"&gt;Link A&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;   
                  &lt;ul class="level_2"&gt;
                      &lt;li class="level_2"&gt;
                          &lt;a href="#"&gt;Link B&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;           
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Desire HTML</strong></p>
  
  <pre><code>   &lt;div id="navigation"&gt;
          &lt;ul id="level_1"&gt;
              &lt;li class="level_1"&gt;
                  &lt;ul class="level_2"&gt;
                      &lt;li class="level_2"&gt;
                          &lt;a href="#"&gt;Link A&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="level_2"&gt;
                          &lt;a href="#"&gt;Link B&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;               
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>Full Detailed HTML</strong></p>
  
  <pre><code>&lt;div id="navigation"&gt;
      &lt;ul id="level_1"&gt;
          &lt;li class="level_1 furniture"&gt;
              &lt;a href="#"&gt;Furniture&lt;/a&gt;
              &lt;div class="subnav_wrapper"&gt;
                  &lt;ul class="level_2"&gt;
                      &lt;li class="level_2 sofa"&gt;
                          &lt;a href="#"&gt;Sofa&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;   
                  &lt;ul class="level_2"&gt;
                      &lt;li class="level_2 bed"&gt;
                          &lt;a href="#"&gt;Bed&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;           
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="level_1 bathroom"&gt;
              &lt;a href="#"&gt;Bathroom&lt;/a&gt;
              &lt;div class="subnav_wrapper"&gt;
                  &lt;ul class="level_2"&gt;
                      &lt;li class="level_2 shower"&gt;
                          &lt;a href="#"&gt;Shower/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;   
                  &lt;ul class="level_2"&gt;
                      &lt;li class="level_2 bath"&gt;
                          &lt;a href="#"&gt;Bath&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;           
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>