javascript - 按字母顺序对多级列表菜单进行排序

Question

我需要按字母顺序对多级 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

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

Answer 1

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

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

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

JSFiddle