如何確保我的目錄列表按照字母順序排序，當它顯示javascript的項目？

Question

我有一個應該顯示這樣的形象項目一個javascript：

但它不以字母順序排列，如圖像生成它們。

這裏有一個例子是怎麼回事（僅HTML包括& CSS，它的展示basicly如何它的渲染之後執行JavaScript）：

看看：http://jsbin.com/UHiZUJU/20/edit

產生的JavaScript這些項目與其大字母如下：

$(".processlinks-section-item-title2 a").each(function() { 
        var text = $(this).text(); 
        var href = $(this).attr('href'); 
        if (!text.length) return; 
        var letter = text.substr(0, 1).toUpperCase(); 
        if (letter.match(/[0-9]/g)) 
         letter = "#"; 

        var list = $('.processlinks-section-template'); 
        var section = list.children('[data-letter="'+letter+'"]'); 
        if (!section.length) { 
         var section = $('<div class="processlinks-section-item" data-letter="' + letter + '"></div>'); 
         if (!list.children().length) { 
          list.append(section); 
         } else { 
          // find right element so list is sorted 
          section.insertAfter(list.children()[0]); 
         } 
        } 
        var item = $('<div class="processlinks-section-item-title">' + '<a href="' + href + '">' + text + '</a>'); 
        if (!section.children().length) { 
         section.append(item); 
        } else { 
         // find right element so list is sorted 
         item.insertAfter(section.children()[0]); 
        } 

       }); 

所以我的問題是我怎麼能按字母順序排序這些？

這是一個測試JSbin，其中包含CSS，HTML和JavaScript，但JavaScript在按鈕單擊時執行，其僅用於測試。

看看：http://jsbin.com/aMElAba/5/edit

Answer 1

排序使用each之前的項目：

$(".processlinks-section-item-title2 a").sort(function(a, b) { 
    var letterA = $(a).text().charAt(0).toUpperCase(), 
     letterB = $(b).text().charAt(0).toUpperCase(); 
    return letterA > letterB ? -1 : (letterA < letterB ? 1 : 0); 
}).each(...