title: Lists alphabetical ordered by javascript with letter headings
body: <p>I have a list like this:</p>
  
  <pre><code>&lt;ul id="list"&gt;
      &lt;li&gt;&lt;a href="/"&gt;Adam&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/"&gt;Alex&lt;/a&gt;&lt;/li&gt;
      ...
      &lt;li&gt;&lt;a href="/"&gt;Zara&lt;/a&gt;&lt;/li&gt;            
  &lt;/ul&gt;
  </code></pre>
  
  <p>And it is already alphabetical ordered by this JavaScript:</p>
  
  <pre><code>var mylist = $('#list');
  var listitems = mylist.children('li').get();
  listitems.sort(function(a, b) {
      return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
  })
  $.each(listitems, function(idx, itm) { mylist.append(itm); });
  </code></pre>
  
  <p>Now I need to set the list like this:</p>
  
  <pre><code>&lt;ul id="list"&gt;
      &lt;li id="a"&gt;&lt;a name="a" class="title"&gt;A&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="/"&gt;Adam&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="/"&gt;Alex&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li id="b"&gt;&lt;a name="b" class="title"&gt;B&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="/"&gt;Barry&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="/"&gt;Becky&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      ...
      ...
      ...
      &lt;li id="z"&gt;&lt;a name="z" class="title"&gt;z&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="/"&gt;zavv&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="/"&gt;zora&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>To use the list in this <a href="http://devgrow.com/slidernav/" rel="nofollow">Apple Style Slider</a>.</p>
  
  <p>Do you know how can I do it with JavaScript?</p>