jQuery按字母顺序对列表进行分组 [英] jQuery to group a list alphabetically

问题描述

我有一个这样的列表:

<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>

我需要转换为按字母顺序分组的列表，如下所示:

That I need to convert to a list grouped alphabetically like this:

<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对列表进行了排序，但是无法完全弄清楚如何实现所需的分组，有人可以帮忙吗?

I've sorted the list with jQuery, but can't quite figure out how to achieve the grouping I need, can anyone help?

我可以将更多信息添加到我的原始列表中，所以看起来像这样:

I can add more info to my original list, so it looks like this:

<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>

我怀疑这会有所帮助

推荐答案

这样的事情怎么样?

var headings = 'abcdefghijklmnopqrstuvwxyz';

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

在 jsfiddle

这篇关于jQuery按字母顺序对列表进行分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！