循环调节列表

页面上有这么一个列表：
<ul id='adjustable-list'>
  <li>
    <span>1</span>
    <button class='up'>UP</button>
    <button class='down'>DOWN</button>
  </li>
  <li>
    <span>2</span>
    <button class='up'>UP</button>
    <button class='down'>DOWN</button>
  </li>
  <li>
    <span>3</span>
    <button class='up'>UP</button>
    <button class='down'>DOWN</button>
  </li>
  ...
</ul>

点击 UP 按钮会使得该 li 元素在列表中上升一个位置，点击 DOWN 按钮会使得该 li 元素下降一个位置。点击最后的元素的 DOWN 按钮会使得元素回到第一个位置，点击第一个元素的 UP 按钮会使其回到最后的位置。

完成 initAdjustableList() 函数，给元素添加事件。

答案
值得注意的点：
1、使用getElementsBy获得的dom是伪数组，无法执行forEach函数，要用[...]或者Array.from、来转换。
2、parentNode有insertBefore方法，语法是parentNode.insertBefore(cur,target)将cur节点插入到target之前。
3、由于没有insertAfter方法，所以要使用以下代码来模拟该方法

    let next=lis[idx+1]
     if(!next){
          ul.insertBefore(curLi,lis[0])
      }else{
           ul.insertBefore(next,curLi)
     }

  const initAdjustableList = ()=>{
           let btns= document.getElementsByTagName('button');
           let ul=document.getElementById('adjustable-list')
           let lis=document.getElementsByTagName('li');
           [...btns].forEach((btn,idx)=>{
               btn.addEventListener('click',(e)=>{
                   let curLi=e.target.parentNode;
                   [...lis].forEach((li,idx)=>{
                        if(li==curLi){
                            if(btn.className=='up'){
                                ul.insertBefore(curLi,lis[idx-1])
                            }else if(btn.className=='down'){
                                let next=lis[idx+1]
                                if(!next){
                                    ul.insertBefore(curLi,lis[0])
                                }else{
                                    ul.insertBefore(next,curLi)
                                }
                            }
                        }
                   });
               })
           });
        }