我需要按字母顺序对多级 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
类,我不能
了解我应该为整个菜单使用什么选择器以获得我需要的结果。
希望得到您的帮助。 谢谢。
最佳答案
如果你改变var listitems = $('li', mylist).get();
至 var listitems = $('> li', mylist).get();
在您的 sortList 函数中,它只会查看 <li>
当前列表的标签。
然后你可以通过调用对所有列表进行排序
$("ul").each(function(){
$(this).sortList();
})
关于javascript - 按字母顺序对多级列表菜单进行排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30375307/