TestDome食品排名列表挑战技术求助：实现Up!/Down!按钮驱动的列表项上下移动功能

我来帮你搞定这个食品排名列表的功能！先梳理下你现有代码里的几个关键问题，再给你完整的修正实现：

原代码的问题分析 #

• 方法名拼写错误：getElementByTagName应该是getElementsByTagName（注意复数形式Elements），否则会直接报错
• 冗余的嵌套循环：你用了两层循环遍历列表项和按钮，这会导致每个按钮被重复绑定多次事件，完全没必要
• 闭包陷阱：循环变量l和b在事件回调执行时已经变成循环的最后一个值了，没法正确对应到触发事件的按钮和所属列表项
• 缺少实际的DOM移动操作：代码里只定义了up/down变量，但没有执行任何修改列表结构的操作，自然看不到元素移动的效果

修正后的完整代码 #

function setup() {
  // 获取所有<li>列表项
  const listItems = document.getElementsByTagName('li');
  
  // 遍历每个列表项，为对应的按钮绑定事件
  for (const item of listItems) {
    // 取出当前列表项里的两个按钮（固定顺序：第一个是Up，第二个是Down）
    const [upBtn, downBtn] = item.getElementsByTagName('button');
    
    // Up按钮点击事件：将当前项上移一位
    upBtn.addEventListener('click', () => {
      const prevItem = item.previousElementSibling;
      // 只有当前项不是第一个时，才执行上移操作
      if (prevItem) {
        item.parentElement.insertBefore(item, prevItem);
      }
    });
    
    // Down按钮点击事件：将当前项下移一位
    downBtn.addEventListener('click', () => {
      const nextItem = item.nextElementSibling;
      // 只有当前项不是最后一个时，才执行下移操作
      if (nextItem) {
        // insertBefore可以实现"插入到后面"：把当前项插到下一项的下一个位置
        item.parentElement.insertBefore(item, nextItem.nextElementSibling);
      }
    });
  }
}

// 测试代码（题目提供的示例）
document.body.innerHTML = `<ol> <li><button>Up!</button>Taco<button>Down!</button></li> <li><button>Up!</button>Pizza<button>Down!</button></li> <li><button>Up!</button>Eggs<button>Down!</button></li> </ol>`;
setup();

代码关键逻辑说明 #

1. 遍历列表项：用for...of循环遍历所有<li>，每个迭代的item就是当前列表项，避免了闭包陷阱
2. 按钮获取：每个列表项里的按钮是固定顺序，直接通过解构赋值取出Up和Down按钮，简洁明了
3. 元素移动核心：
   • 上移：通过previousElementSibling获取前一个列表项，用insertBefore把当前项插到它前面
   • 下移：通过nextElementSibling获取后一个列表项，把当前项插到后一项的下一个位置，就相当于移到了后一项的后面
4. 边界判断：判断prevItem/nextItem是否存在，避免第一个项点击Up、最后一个项点击Down时出现无效操作

这样修改后，点击Up/Down按钮就能正确实现列表项的上下移动了，完全符合题目要求~

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