点击置顶列表项技巧详解

中。

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

<ul>
  <li>Color</li>
  <li>Size</li>
  <li>Price</li>
</ul>

<script>
  const ul = document.querySelector("ul");
  const listItems = ul.querySelectorAll("li");

  function moveToTop() {
    ul.prepend(this); // this 指向被点击的 li 元素
  }

  listItems.forEach(item => item.addEventListener("click", moveToTop));
</script>

✅ 关键点说明：

• 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() 会重复将其置顶（无副作用），符合预期行为。

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

  以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。