按字母顺序排序多级列表菜单

时间：2015-05-21 13:33:43

标签： javascript jquery html css sorting

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

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

2 个答案:

答案 0 :(得分：0)

根据@NagarajS的建议（order ul in jquery），我对你的案子进行了一些修改。

试试这个：

$('.menu ul').each(function () {
    var ul = $(this);
    var items = $(this).children().get();
    items.sort(function (a, b) {
        var keyA = $(a).text();
        var keyB = $(b).text();

        if (keyA < keyB) return -1;
        if (keyA > keyB) return 1;
        return 0;
    });
    $.each(items, function (i, li) {
        ul.append(li);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
    <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>
</div>

ul div中的每个.menu将从顶级到最低级别进行排序。

答案 1 :(得分：0)

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

然后您可以通过调用

对所有列表进行排序 
$("ul").each(function(){
    $(this).sortList();
})

JSFiddle

相关问题
最新问题