title: Serialize all id's in a div using jquery
body: <p>I am trying to create a re-ordering of the page drag and drop feature on my CMS. As some of the pages have sub pages, we have a lot of lists nested within lists. An example of the code:</p>
  
  <pre><code>$(document).ready(function(){ 
  
      $(function() {
              $('#contentLeft ul').sortable({ 
              update: function() {
                  var order = $('#contentLeft ul').sortable('serialize');
                  alert(order);
              }                                         
          });
  
      });
  
  }); 
  
  
  &lt;div id="contentLeft"&gt;
  
  
  &lt;ul id="sitemap"&gt; 
  &lt;li id="page_1" class="page_container"&gt; 
  Test
  &lt;ul&gt;
  &lt;li id="page_20"&gt;Nested one&lt;/li&gt;
  &lt;li id="page_30"&gt;nested 2&lt;/li&gt;
  &lt;li id="page_40"&gt; Nested 6&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt; 
  &lt;li id="page_4" class="page_container"&gt; 
  Test
  &lt;/li&gt; 
  &lt;li id="page_5" class="page_container"&gt; 
  Test
  &lt;/li&gt; 
  &lt;/ul&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>In the above example, when I move things around and serialize the ul, i get the list of top level lists elements returned (page[]=1, page[]=4, page[]=5). What I need is for it to serialize ALL of the li tags, including the children li tags and get something like (page[]=1, page[]=20, page[]=30, page[]=40, page[]=4, page[]=5).</p>
  
  <p>I have tried applying serialize quite simply to <li> or  like:
  var order = $('li').sortable('serialize');
  and
  var order = $('ul').sortable('serialize');</p>
  
  <p>but had no luck.</p>
  
  <p>Could anyone point me in the right direcition?</p>
  
  <p>Many Thanks</p>