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>

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

1 个答案: