如何根据li内button的文本内容对ul列表进行排序？

用原生JavaScript就能完成这个需求，核心是提取需要排序的列表项、按按钮文本规则排序后重新插入DOM。

具体代码实现 #

// 获取目标列表容器
const list = document.getElementById('prefixed-list');
// 获取所有列表项，排除第一个作为标题的active项
const items = Array.from(list.querySelectorAll('.list-group-item:not(.active)'));

// 按按钮文本排序：Available项在前，Not Available项在后
items.sort((a, b) => {
  const aStatus = a.querySelector('button').textContent.trim();
  const bStatus = b.querySelector('button').textContent.trim();
  
  // 如果a是Available，b是Not Available，a排前面
  if (aStatus === 'Available' && bStatus === 'Not Available') return -1;
  // 如果a是Not Available，b是Available，b排前面
  if (aStatus === 'Not Available' && bStatus === 'Available') return 1;
  // 其他情况（同状态）保持原有顺序
  return 0;
});

// 清空原有非标题项，再插入排序后的项
const headerItem = list.querySelector('.list-group-item.active');
// 移除所有非标题项
items.forEach(item => item.remove());
// 把排序后的项依次插入到标题后面
items.forEach(item => headerItem.after(item));

代码说明 #

• 先区分开作为标题的第一个li（带active类）和需要排序的其他li，避免标题被打乱位置。
• 排序时通过querySelector获取每个li里的按钮，读取文本内容判断状态。
• 排序函数返回值控制顺序：返回-1时a排在b前，返回1时b排在a前，同状态时保持原顺序（稳定排序）。
• 最后通过移除再重新插入的方式更新DOM，确保排序后的列表正确渲染。

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