按字母顺序排序多级列表菜单(Sort multilevel list menu alphabetically)

按字母顺序排序多级列表菜单(Sort multilevel list menu alphabetically)

我需要按字母顺序对多级html列表进行排序。 我拥有的：

<ul> <li> <a href="#">B Link</a> <ul class="sub-cat-list"> <li> <a href="#">X sub link </a> <ul class="sub-cat-list"> <li><a href="#">A Sub sub link</a></li> <li><a href="#">C sub sub link</a></li> <li><a href="#">D sub sub link</a></li> <li><a href="#">X sub sub link</a></li> </ul> </li> </ul> </li> <li> <a href="#">A Link</a> <ul class="sub-cat-list"> <li> <a href="#">H sub link </a> <ul class="sub-cat-list"> <li><a href="#">X Sub sub link</a></li> <li><a href="#">D sub sub link</a></li> <li><a href="#">F sub sub link</a></li> <li><a href="#">Z sub sub link</a></li> </ul> </li> <li> <a href="#">B sub link </a> <ul class="sub-cat-list"> <li><a href="#">V Sub sub link</a></li> <li><a href="#">J sub sub link</a></li> <li><a href="#">O sub sub link</a></li> <li><a href="#">U sub sub link</a></li> </ul> </li> </ul> </li> <li> <a href="#">X Link</a> <ul class="sub-cat-list"> <li> <a href="#">C sub link </a> <ul class="sub-cat-list"> <li><a href="#">L Sub sub link</a></li> <li><a href="#">O sub sub link</a></li> <li><a href="#">Y sub sub link</a></li> <li><a href="#">Y sub sub link</a></li> </ul> </li> <li> <a href="#">A sub link </a> <ul class="sub-cat-list"> <li><a href="#">G Sub sub link</a></li> <li><a href="#">T sub sub link</a></li> <li><a href="#">R sub sub link</a></li> <li><a href="#">A sub sub link</a></li> </ul> </li> </ul> </li> </ul>

应对每个链接和每个阻止列表进行排序。 所以我需要的是：

<ul> <li> <a href="#">A Link</a> <ul class="sub-cat-list"> <li> <a href="#">B sub link </a> <ul class="sub-cat-list"> <li><a href="#">J sub sub link</a></li> <li><a href="#">O sub sub link</a></li> <li><a href="#">U sub sub link</a></li> <li><a href="#">V Sub sub link</a></li> </ul> </li> <li> <a href="#">H sub link </a> <ul class="sub-cat-list"> <li><a href="#">D sub sub link</a></li> <li><a href="#">F sub sub link</a></li> <li><a href="#">X Sub sub link</a></li> <li><a href="#">Z sub sub link</a></li> </ul> </li> </ul> </li> <li> <a href="#">B Link</a> <ul class="sub-cat-list"> <li> <a href="#">X sub link </a> <ul class="sub-cat-list"> <li><a href="#">A Sub sub link</a></li> <li><a href="#">C sub sub link</a></li> <li><a href="#">D sub sub link</a></li> <li><a href="#">X sub sub link</a></li> </ul> </li> </ul> </li> <li> <a href="#">X Link</a> <ul class="sub-cat-list"> <li> <a href="#">A sub link </a> <ul class="sub-cat-list"> <li><a href="#">A sub sub link</a></li> <li><a href="#">G Sub sub link</a></li> <li><a href="#">R sub sub link</a></li> <li><a href="#">T sub sub link</a></li> </ul> </li> <li> <a href="#">C sub link </a> <ul class="sub-cat-list"> <li><a href="#">L Sub sub link</a></li> <li><a href="#">O sub sub link</a></li> <li><a href="#">Y sub sub link</a></li> <li><a href="#">Y sub sub link</a></li> </ul> </li> </ul> </li> </ul>

有一个排序代码：

$.fn.sortList = function() { var mylist = $(this); var listitems = $('li', mylist).get(); listitems.sort(function(a, b) { var compA = $(a).text().toUpperCase(); var compB = $(b).text().toUpperCase(); return (compA < compB) ? -1 : 1; }); $.each(listitems, function(i, itm) { mylist.append(itm); }); }

我试着用这种方式使用它：

$("ul.sub-cat-list >li >ul").each(function(){ $(this).sortList(); })

但问题是它只适用于第二个.sub-cat-list类，我无法理解我应该使用哪个选择器来获取整个菜单以获得我需要的结果。

的jsfiddle

希望得到你的帮助。 谢谢。

I need to sort a multilevel html list alphabetically. What I have:

<ul> <li> <a href="#">B Link</a> <ul class="sub-cat-list"> <li> <a href="#">X sub link </a> <ul class="sub-cat-list"> <li><a href="#">A Sub sub link</a></li> <li><a href="#">C sub sub link</a></li> <li><a href="#">D sub sub link</a></li> <li><a href="#">X sub sub link</a></li> </ul> </li> </ul> </li> <li> <a href="#">A Link</a> <ul class="sub-cat-list"> <li> <a href="#">H sub link </a> <ul class="sub-cat-list"> <li><a href="#">X Sub sub link</a></li> <li><a href="#">D sub sub link</a></li> <li><a href="#">F sub sub link</a></li> <li><a href="#">Z sub sub link</a></li> </ul> </li> <li> <a href="#">B sub link </a> <ul class="sub-cat-list"> <li><a href="#">V Sub sub link</a></li> <li><a href="#">J sub sub link</a></li> <li><a href="#">O sub sub link</a></li> <li><a href="#">U sub sub link</a></li> </ul> </li> </ul> </li> <li> <a href="#">X Link</a> <ul class="sub-cat-list"> <li> <a href="#">C sub link </a> <ul class="sub-cat-list"> <li><a href="#">L Sub sub link</a></li> <li><a href="#">O sub sub link</a></li> <li><a href="#">Y sub sub link</a></li> <li><a href="#">Y sub sub link</a></li> </ul> </li> <li> <a href="#">A sub link </a> <ul class="sub-cat-list"> <li><a href="#">G Sub sub link</a></li> <li><a href="#">T sub sub link</a></li> <li><a href="#">R sub sub link</a></li> <li><a href="#">A sub sub link</a></li> </ul> </li> </ul> </li> </ul>

Every link and every block list should be sorted. So what I need:

<ul> <li> <a href="#">A Link</a> <ul class="sub-cat-list"> <li> <a href="#">B sub link </a> <ul class="sub-cat-list"> <li><a href="#">J sub sub link</a></li> <li><a href="#">O sub sub link</a></li> <li><a href="#">U sub sub link</a></li> <li><a href="#">V Sub sub link</a></li> </ul> </li> <li> <a href="#">H sub link </a> <ul class="sub-cat-list"> <li><a href="#">D sub sub link</a></li> <li><a href="#">F sub sub link</a></li> <li><a href="#">X Sub sub link</a></li> <li><a href="#">Z sub sub link</a></li> </ul> </li> </ul> </li> <li> <a href="#">B Link</a> <ul class="sub-cat-list"> <li> <a href="#">X sub link </a> <ul class="sub-cat-list"> <li><a href="#">A Sub sub link</a></li> <li><a href="#">C sub sub link</a></li> <li><a href="#">D sub sub link</a></li> <li><a href="#">X sub sub link</a></li> </ul> </li> </ul> </li> <li> <a href="#">X Link</a> <ul class="sub-cat-list"> <li> <a href="#">A sub link </a> <ul class="sub-cat-list"> <li><a href="#">A sub sub link</a></li> <li><a href="#">G Sub sub link</a></li> <li><a href="#">R sub sub link</a></li> <li><a href="#">T sub sub link</a></li> </ul> </li> <li> <a href="#">C sub link </a> <ul class="sub-cat-list"> <li><a href="#">L Sub sub link</a></li> <li><a href="#">O sub sub link</a></li> <li><a href="#">Y sub sub link</a></li> <li><a href="#">Y sub sub link</a></li> </ul> </li> </ul> </li> </ul>

There's a code for sorting:

$.fn.sortList = function() { var mylist = $(this); var listitems = $('li', mylist).get(); listitems.sort(function(a, b) { var compA = $(a).text().toUpperCase(); var compB = $(b).text().toUpperCase(); return (compA < compB) ? -1 : 1; }); $.each(listitems, function(i, itm) { mylist.append(itm); }); }

I try to use it with this way:

$("ul.sub-cat-list >li >ul").each(function(){ $(this).sortList(); })

But the problem is it applies to the second .sub-cat-list class only and I can't understand what selector I should use for the whole menu to get the result I need.

JSFiddle

Hope for your help. Thanks.

最满意答案

如果你改变var listitems = $('li', mylist).get(); to var listitems = $('> li', mylist).get(); 在sortList函数中，它只会查看当前列表的<li>标记。

然后，您可以通过调用对所有列表进行排序

$("ul").each(function(){ $(this).sortList(); })

的jsfiddle

If you change var listitems = $('li', mylist).get(); to var listitems = $('> li', mylist).get(); in your sortList function it will only look at the <li> tags for the current list.

Then you can sort all the lists by calling

$("ul").each(function(){ $(this).sortList(); })

JSFiddle