以下为推荐实现方案（已修正原问题中 querySelector("li") 返回单个元素、循环索引错误 $i 等常见问题）：

  
Color
  
Size
  
Price

✅ 关键点说明：

• querySelectorAll("li") 正确获取所有
• 元素集合（类数组），避免 querySelector("li") 仅返回首个元素的错误；
• ul.prepend(this) 是现代 DOM 方法，直接将目标元素插入
  开头，无需手动 remove() + insertBefore()，语义清晰且性能更优；
• 使用 forEach 遍历并绑定事件，比传统 for 循环更安全（避免闭包导致的 this 指向问题）；
• 事件处理器中 this 自动绑定为当前被点击的
• ，无需额外传参或查找。

⚠️ 注意事项：

• prepend() 在 IE 浏览器中不支持，如需兼容 IE，请改用 ul.insertBefore(this, ul.firstChild)；
• 若列表含复杂结构（如嵌套元素、事件监听器或 Vue/React 组件），直接操作 DOM 可能影响框架状态，建议结合响应式数据驱动更新；
• 多次点击同一项时，prepend() 会重复将其置顶（无副作用），符合预期行为。

该方法轻量、可复用，适用于导航菜单、筛选标签、待办事项优先级调整等场景。