jQuery來組名單按字母順序

Question

我有一個這樣的名單：

<ul id="recipes"> 
<li><a href='xxx'>Apple Pie</a></li> 
<li><a href='xxx'>Almond Slice</a></li> 
<li><a href='xxx'>Banana Cake</a></li> 
<li><a href='xxx'>Carrot Cake</a></li> 
</ul> 

，我需要轉換爲按字母順序分組像這樣的列表：

<h3>A<h3> 
<ul> 
<li><a href='xxx'>Apple Pie</a></li> 
<li><a href='xxx'>Almond Slice</a></li> 
</ul> 
<h3>B<h3> 
<ul> 
<li><a href='xxx'>Banana Cake</a></li> 
</ul> 
<h3>C<h3> 
<ul> 
<li><a href=''xxx'>Carrot Cake</a></li> 
</ul> 

我排序的清單， jQuery，但不能完全弄清楚如何實現我需要的分組，任何人都可以幫忙嗎？

編輯：我可以添加更多的信息我原來的列表，所以它看起來是這樣的：

<ul id="recipes"> 
<li class='a'><a href='xxx'>Apple Pie</a></li> 
<li class='a'><a href='xxx'>Almond Slice</a></li> 
<li class='b'><a href='xxx'>Banana Cake</a></li> 
<li class='c'><a href='xxx'>Carrot Cake</a></li> 
</ul> 

我懷疑，這將有很大的幫助

Answer 1

怎麼這樣呢？

var headings = 'abcdefghijklmnopqrstuvwxyz'; 

var $recipes = $('#recipes').detach(); 
$.each(headings, function(){ 
    $('body').append('<h3>' + this + '</h3>'); 
    $('body').append($('<ul/>').append($recipes.find('.' + this))); 
}); 

例如在jsfiddle

Answer 2

另一種解決方案，我想通了，它的工作原理類似：

var letters = [ "a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z" ]; 
$.each(letters, function(idx,val) { 
    $("li." + val).wrapAll("<div><h3>" + val.toUpperCase() + "</h3><ul></ul></div>"); 
});