javascript - 使用 Javascript 对无序列表进行排序

Question

我一直在查看 stackoverflow 线程:

How may I sort a list alphabetically using jQuery?

但对于我的场景，我有层次结构:

<ul><li><a href="http://www.google.com.au">NAME_TO_SORT_ON</a></li></ul>

基于此设置，我如何修改此处提到的线程中的解决方案以满足我的场景，该场景有一个标签，因为我想对 NAME_TO_SORT_ON 中找到的所有名称进行排序？

谢谢。

Answer 1

我建议为此使用基于 jQuery 的解决方案，因为一旦您开始进入多个 DOM 级别(例如，根据更深级别的元素内容对某一级别的同级进行排序)，简单的排序机制就会崩溃。这是一个极其粗糙的解决方案 - 本质上是抛弃了现有的 HTML，并用其他 HTML 在原始文本模式下替换它。我们可以通过实际打乱 DOM 元素来做得更好:

function sort(list, key) {
    $($(list).get().reverse()).each(function(outer) {
        var sorting = this;
        $($(list).get().reverse()).each(function(inner) {
            if($(key, this).text().localeCompare($(key, sorting).text()) > 0) {
                this.parentNode.insertBefore(sorting.parentNode.removeChild(sorting), this);
            }
        });
    });
}

要使用它，我们将一个选择器传递给列表，并传递一个选择器来定位我们想要排序的键:

<ul class="toBeSorted">
    <li><a href="...">sort me</a></li>
</ul>

<script type="text/javascript">
    sort('ul.toBeSorted>li', 'a');

    //we want to sort the <li>'s in ul.toBeSorted;
    //and we want to use the text of the first and only <a>
    //in each item as the sort key
</script>