title: HTML simple list sorting
body: <p>is there is simple way to sort only the outer level of multilist level in HTML?
  (it's not important to sort the inner level of the lists)
  If possible just javascript code, no jQuery since i never used it.</p>
  
  <p>Example: Before sorting</p>
  
  <ol>
  <li><p>List Z</p>
  
  <ul>
  <li>Katty</li>
  <li>Della</li>
  </ul></li>
  <li><p>List G</p>
  
  <ul>
  <li>Test</li>
  <li>fox</li>
  </ul></li>
  <li><p>List R</p>
  
  <ul>
  <li>ABC</li>
  <li>AAC</li>
  </ul></li>
  </ol>
  
  <p>After sorting:</p>
  
  <ol>
  <li><p>List G</p>
  
  <ul>
  <li>Test</li>
  <li>fox</li>
  </ul></li>
  <li><p>List R</p>
  
  <ul>
  <li>ABC</li>
  <li>AAC</li>
  </ul></li>
  <li><p>List Z</p>
  
  <ul>
  <li>Katty</li>
  <li>Della</li>
  </ul></li>
  </ol>
  
  <p>Thank you in advance
  Mike</p>
  
  <p>After using the Jquery method answered below, i got error "Object does not support this property or method??</p>
  
  <p>Update: here is acode sample:</p>
  
  <pre><code>&lt;head&gt;
  
  &lt;script LANGUAGE="JavaScript" SRC="./js/jquery-1.7.2.js"&gt;&lt;/SCRIPT&gt;
  &lt;script type="text/javascript"&gt;
  
  
  
      function sortDesc()
      {
          $('ul.list &gt; li').sortElements(function(a, b){
          return $(a).text() &gt; $(b).text() ? 1 : -1;});
      }
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div id="main"&gt;
              &lt;div class="c1"&gt;
                  &lt;div id="example-list"&gt;
                      &lt;table cellspacing="0" cellpadding="0" border="0" width="100%"&gt;
                          &lt;tr&gt;
                              &lt;td align="middle"     align="center" title='sort' style="cursor:pointer" valign="middle" align="center"  style="width:20px; height:20px;"&gt;
                                  &lt;img border="0" src="./js/r_oinfo.gif" width="20" height="20"  onclick="sortDesc()"&gt;
                          &lt;/td&gt;
                      &lt;/table&gt;
                      &lt;ul class="list"&gt;
                          &lt;li&gt;
                              Search
  
                          &lt;/li&gt;
                          &lt;ul&gt;
                              &lt;li&gt;
                                  se 1
                              &lt;/li&gt;
                              &lt;li&gt;
                                  se 2
                              &lt;/li&gt;
                              &lt;li&gt;
                                  se 0
                              &lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;li&gt;
                              Sort
                          &lt;/li&gt;
                          &lt;ul&gt;
                              &lt;li&gt;
                                  so 1
                              &lt;/li&gt;
                              &lt;li&gt;
                                  so 0
                              &lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;li&gt;
                              Filter
  
                          &lt;/li&gt;
                      &lt;/ul&gt;
                   &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>