如何实现点击列表项时将其移至列表顶部？

你的代码存在几处需要修正的地方，下面是完整的解决方案：

1. 获取全部列表项：原代码用document.querySelector("li")只能拿到第一个<li>元素，要获取所有列表项，得改用document.querySelectorAll("li")。
2. 修正循环语法：循环里的listItems[$i]是错误写法，应该改为listItems[i]。
3. 实现置顶逻辑：在点击事件中，先获取当前列表项的父元素（也就是<ul>），然后用prepend()方法把当前点击的项插入到父元素的最开头，就能完成置顶效果。

完整代码 #

HTML

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

JavaScript

function setOnTop() {
  // 获取所有列表项
  var listItems = document.querySelectorAll("li");
  for (var i = 0; i < listItems.length; i++) {
    listItems[i].addEventListener("click", function() {
      // 获取当前项的父元素ul
      var parentUl = this.parentNode;
      // 将当前点击的li移到ul最顶部
      parentUl.prepend(this);
    });
  }
}

// 页面加载完成后执行函数，确保DOM元素已渲染
window.onload = setOnTop;

补充说明 #

• prepend()方法会把元素插入到父元素的第一个子节点位置，主流浏览器都支持；如果需要兼容更老旧的浏览器，可以用parentUl.insertBefore(this, parentUl.firstChild)实现同样效果。
• 必须等页面DOM加载完成后再调用setOnTop()，否则会因为元素还未渲染导致无法获取到列表项。

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