jQuery-将列表按标题分组，然后按字母顺序

Question

我正在尝试按字母顺序将列表按标题分组。到目前为止，我在这里找到了第一步的解决方案：Use jQuery to sort a list into groups with headings

然后，我希望标题按字母顺序排序。嵌套列表应按字母顺序排序，以便于此：

<ul id="list">
    <li class="grouphead">Meat</li>
    <li>
        <ul>
            <li><a href="#" rel="Meat">Lamb</a></li>
            <li><a href="#" rel="Meat">Pork</a></li>
            <li><a href="#" rel="Meat">Beef</a></li>
        </ul>
    </li>
    <li class="grouphead">Fruit and Vegetables</li>
    <li>
        <ul>
            <li><a href="#" rel="Fruit and Vegetables">Orange</a></li>
            <li><a href="#" rel="Fruit and Vegetables">Banana</a></li>
            <li><a href="#" rel="Fruit and Vegetables">Cabbage</a></li>
        </ul>
    </li>
</ul>

对此

<ul id="list">
    <li class="grouphead">Fruit and Vegetables</li>
    <li>
        <ul>
            <li><a href="#" rel="Fruit and Vegetables">Banana</a></li>
            <li><a href="#" rel="Fruit and Vegetables">Cabbage</a></li>
            <li><a href="#" rel="Fruit and Vegetables">Orange</a></li>
        </ul>
    </li>
    <li class="grouphead">Meat</li>
    <li>
        <ul>
            <li><a href="#" rel="Meat">Beef</a></li>
            <li><a href="#" rel="Meat">Lamb</a></li>
            <li><a href="#" rel="Meat">Pork</a></li>
        </ul>
    </li>
</ul>

这是我到目前为止的内容：http://jsfiddle.net/z6j5t0k3/5/

<ul id="list">
 <li><a href="#" rel="Meat">Lamb</a></li>
 <li><a href="#" rel="Meat">Pork</a></li>
 <li><a href="#" rel="Meat">Beef</a></li>
 <li><a href="#" rel="Fruit and Vegetables">Banana</a></li>
 <li><a href="#" rel="Fruit and Vegetables">Orange</a></li>
 <li><a href="#" rel="Fruit and Vegetables">Cabbage</a></li>
</ul>


var dict = {
}

$("#list li").each( function() {
    var k = $(this).children(":first").attr('rel');
    if ( dict.hasOwnProperty(k) == false ) {
        dict[k] = [];
    }
    dict[k].push( $(this).html() );
} );

$("#list").empty();

function newList(nam) {
    var r = "";
    for ( c in dict[nam] ) {
        r += "<li>" + dict[nam][c] + "</li>";
    }    
    return r;
}
for ( nam in dict ) {
    $("#list").append("<li class='grouphead'>" + nam + "</li>");
    $("#list").append("<li><ul>" + newList(nam) + "</ul></li>");
}




function uCase(elem) {
    return $.trim( $(elem).text().toUpperCase() )
}
function compareFirstLink(a, b) {
    var A = uCase( $(a).first('a') ),
        B = uCase( $(b).first('a') );       
    return (A > B) ? 1 : -1;
}
$(function () {
    var $sortables = $("ul:has(div:first-child), li:not(.fixedOrder)");
    $sortables.sort(compareFirstLink).each(function () {
        this.parentNode.appendChild(this);
    });
}); 

我使用了这个（Sorting nested lists）中的代码来尝试按字母顺序对嵌套列表进行排序，但这没用。

谢谢！