如何使用普通 JavaScript 按列表项的 ID 对无序列表进行排序？答案

【问题标题】：How can I sort an unordered list by the list items' ids with vanilla JavaScript?如何使用普通 JavaScript 按列表项的 ID 对无序列表进行排序？
【发布时间】：2022-12-18 18:38:22
【问题描述】：

我有一个会议日期列表，例如星期一早上、星期一下午、星期一晚上、星期二早上等等，然后以无序列表的形式显示在网站的前端。因为文本不是按字母顺序排列的，所以我想使用我为每个项目创建的 ID 根据项目别名和添加的前缀对项目进行排序。例如。 "monday-morning" 别名现在是 "aa-monday-morning" 而它又被用来创建 id="aa-monday-morning" 每个列表项都具有类“sort”，并且位于一个 ul 中，id 为“meetings”。 [我确实意识到，如果它们一开始就以正确的顺序设置，我就不会有问题，但为时已晚，因为现在有 100 多个项目被这些列表项目标记]。

我知道我需要选择所有类名为“排序”的项目，然后将它们转换为数组，然后再按它们的 ID 对它们进行排序，但我真的很挣扎。

我从从某处复制的一些代码开始，但它似乎没有做任何事情，我不确定为什么。

let List = document.getElementById("meetings");
let listItems = List.getElementsByClassName('sort');
    sortList = Array.prototype.slice.call(listItems);
    if(listItems && listItems.length){
        listItems.sort(sortList);
        while (List.hasChildNodes()) {
            List.removeChild(List.lastChild);
        }
        while(listItems.length){
            var newList = listItems.shift();
            List.appendChild(newList);
        }
    }
function sortList(a, b){
    var aid = (a.id);
    var bid = (b.id);
    return aid - bid;
}

<ul id="meetings" class="sidebar">
<li id="aa-monday-morning" class="sort">Monday morning</li>
<li id="ba-tuesday-morning" class="sort">Tuesday morning</li>
<li id="bc-tuesday-evening" class="sort">Tuesday evening</li>
<li id="cc-wednesday-evening" class="sort">Wednesday evening</li>
<li id="dc-thursday-evening" class="sort">Thursday evening</li>
<li id="fb-friday-afternoon" class="sort">Friday afternoon</li>
<li id="ca-wednesday-morning" class="sort">Wednesday morning</li>
<li id="bb-tuesday-afternoon" class="sort">Tuesday afternoon</li>
<li id="cb-wednesday-afternoon" class="sort">Wednesday afternoon</li>
<li id="ac-monday-evening" class="sort">Monday evening</li>
<li id="ab-monday-afternoon" class="sort">Monday afternoon</li>
</ul>

最终结果应该是：

    <ul id="meetings" class="sidebar">
    <li id="aa-monday-morning" class="sort">Monday morning</li>
    <li id="ab-monday-afternoon" class="sort">Monday afternoon</li>
    <li id="ac-monday-evening" class="sort">Monday evening</li>
    <li id="ba-tuesday-morning" class="sort">Tuesday morning</li>
    <li id="bb-tuesday-afternoon" class="sort">Tuesday afternoon</li>
    <li id="bc-tuesday-evening" class="sort">Tuesday evening</li>
    <li id="ca-wednesday-morning" class="sort">Wednesday morning</li>
    <li id="cb-wednesday-afternoon" class="sort">Wednesday afternoon</li>
    <li id="cc-wednesday-evening" class="sort">Wednesday evening</li>
    <li id="dc-thursday-evening" class="sort">Thursday evening</li>
    <li id="fb-friday-afternoon" class="sort">Friday afternoon</li>
    </ul>

感谢您阅读。

【问题讨论】：

您正在创建一个排序列表，但没有对它做任何事情。也许你想要listItems = listItems.sort(sortList);

标签： javascript html arrays sorting

【解决方案1】：

在对列表项进行排序的代码块之外定义 sortList 函数。这将确保函数在排序方法中使用之前定义
直接对 listItems 数组使用 sort 方法，而不是对 listItems 调用 sort 并将 sortList 作为参数传递。您还可以将 sortList 函数作为排序方法的比较函数传递。
修改sortList函数比较a和b元素的id属性，而不是比较元素本身

【讨论】：