title: Custom jQuery sorting on HTML navigation. How to order elements based on title?
body: <p>I have a custom navigation built that I would like to apply a specific sort order based on their title. How would I go about sorting this menu so that instead of:</p>
  
  <p>Site 1, Site 2, Site 3, Site 4</p>
  
  <p>We get Site 3, Site 2, Site 4, Site 1</p>
  
  <pre><code>    &lt;div class='navGroup' &gt;
      &lt;ul class='navSites'&gt;
        &lt;li&gt;
          &lt;a&gt;Site 1&lt;/a&gt;&lt;span class='exSpand'&gt;[+]&lt;/span&gt;
            &lt;ul class='navSecondLevelSite'&gt;
                &lt;li&gt;&lt;a href='/Home.aspx' &gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href='/feedback.aspx' &gt;Feedback&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href='/OfficesMaps.aspx' &gt;Offices Maps &amp; Meeting Rooms&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href='/SystemAlerts.aspx' &gt;System Alerts&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a&gt;Site 2&lt;/a&gt;&lt;span class='exSpand'&gt;[+]&lt;/span&gt;
            &lt;ul class='navSecondLevelSite'&gt;
                &lt;li&gt;&lt;a href='/Page1.aspx' &gt;Page1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href='/Page2.aspx' &gt;Page2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href='/Page3.aspx' &gt;Page3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a&gt;Site 3&lt;/a&gt;&lt;span class='exSpand'&gt;[+]&lt;/span&gt;
            &lt;ul class='navSecondLevelSite'&gt;
                &lt;li&gt;&lt;a href='/Page1.aspx' &gt;Page1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href='/Page2.aspx' &gt;Page2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href='/Page3.aspx' &gt;Page3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a&gt;Site 4&lt;/a&gt;&lt;span class='exSpand'&gt;[+]&lt;/span&gt;
            &lt;ul class='navSecondLevelSite'&gt;
                &lt;li&gt;&lt;a href='/Page1.aspx' &gt;Page1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href='/Page2.aspx' &gt;Page2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href='/Page3.aspx' &gt;Page3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>fiddle:</p>
  
  <p><a href="http://jsfiddle.net/Colbs/UyDLL/" rel="nofollow">http://jsfiddle.net/Colbs/UyDLL/</a></p>