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>"); 
});