如何用原生JavaScript按元素ID对无序列表排序？

问题背景 #

会议时段以无序列表展示，所有列表项带sort类，父容器是id="meetings"的<ul>。因为文本无法直接按字母排序，给每个列表项加了带排序前缀的ID（比如aa-monday-morning），需要通过ID对列表项重新排序，但原有代码无法生效。

原代码问题分析 #

原代码存在三个关键错误：

• 调用排序方法时搞混了变量：应该对转换后的数组sortList排序，而非原HTMLCollectionlistItems
• 字符串排序不能用减法aid - bid，必须用字符串专用的比较方法
• 变量sortList未用let/var声明，存在作用域问题

修正后的代码 #

JavaScript 代码 #

const meetingsList = document.getElementById("meetings");
// 获取所有带sort类的元素并转为数组
const listItems = Array.from(meetingsList.getElementsByClassName('sort'));

if (listItems.length) {
    // 按ID字符串排序
    listItems.sort((a, b) => a.id.localeCompare(b.id));
    
    // 清空原列表
    meetingsList.innerHTML = '';
    
    // 将排序后的元素重新添加到列表
    listItems.forEach(item => meetingsList.appendChild(item));
}

HTML 结构（无需修改） #

<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>

关键说明 #

1. 使用Array.from()将HTMLCollection转为数组，比Array.prototype.slice.call()更简洁直观
2. 用localeCompare()做字符串排序，这是处理字母顺序排序的标准方法，能正确识别字母的先后顺序
3. 用innerHTML = ''清空列表比循环删除子节点更高效，适合100+元素的场景
4. 用forEach()遍历数组添加元素，代码结构更清晰易读

排序后预期结果 #

<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>

内容的提问来源于stack exchange，提问作者Gillian