如何基于value优先级对HTML的ul li列表进行排序？

实现思路 #

通过JavaScript自定义排序规则，先根据value属性匹配优先级权重，同优先级的再按data-title字母顺序排序，最后重新渲染列表。

具体代码实现 #

// 定义优先级权重，数值越小优先级越高
const priorityMap = {
  driving: 0,
  idle: 1,
  stop: 2
};

// 获取目标列表和所有列表项
const ul = document.getElementById('myUl');
const liItems = Array.from(document.querySelectorAll('.myLi'));

// 自定义排序函数
liItems.sort((a, b) => {
  // 先比较优先级权重
  const priorityA = priorityMap[a.getAttribute('value')];
  const priorityB = priorityMap[b.getAttribute('value')];
  if (priorityA !== priorityB) {
    return priorityA - priorityB;
  }
  // 优先级相同时，按data-title字母顺序排序
  const titleA = a.getAttribute('data-title');
  const titleB = b.getAttribute('data-title');
  return titleA.localeCompare(titleB);
});

// 清空原列表并重新添加排序后的项
ul.innerHTML = '';
liItems.forEach(item => ul.appendChild(item));

代码说明 #

• 优先级映射：用对象定义每个状态对应的权重，确保driving（0）> idle（1）> stop（2）的排序逻辑。
• 数组转换：将DOM节点集合转为数组，方便使用数组的sort方法。
• 排序逻辑：先对比权重值，权重不同直接按权重差排序；权重相同则调用localeCompare方法按data-title的字母顺序排序，和你之前的字母排序逻辑一致。
• 重新渲染：清空原列表后，将排序后的列表项依次添加回去，完成排序更新。

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