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, но не могу понять, как добиться необходимой группировки, может ли кто-нибудь помочь?

EDIT: Я могу добавить больше информации в моем первоначальном списке, так это выглядит следующим образом:

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