更改點擊時列表項的位置

Question

什麼算法可以解決以下問題？我需要當你點擊菜單塊中的一個接收到的類活動，並在中間起牀。

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li class="active">4</li> 
    <li>5</li> 
</ul> 

ul li { 
    float: left; 
    list-style: none; 
    background: red; 
    margin-left: 20px; 
    display: block; 
    padding: 20px; 
} 

.active { 
    background: orange; 
} 

Fiddle

Answer 1

對於加入活性類做下面

var liElems = document.getElementsByTagName('li'), mid = Math.floor(liElems.length/2); 
Array.prototype.forEach.call(liElems, function (item, idx) { 
    item.idx = idx; 
    item.onclick = function() { 
     document.querySelector('li.active').classList.remove('active'); 
     this.classList.add('active'); 
    }; 
}); 

演示：Fiddle

---

var liElems = document.getElementsByTagName('li'), 
    length = liElems.length, 
    mid = Math.floor(liElems.length/2); 
Array.prototype.forEach.call(liElems, function (item, idx) { 
    item.idx = idx; 
    item.onclick = function() { 
     document.querySelector('li.active').classList.remove('active'); 
     this.classList.add('active'); 


     if (liElems[mid].idx != mid) { 
      if (liElems[mid].idx == length - 1) { 
       this.parentNode.appendChild(liElems[mid]) 
      } else { 
       this.parentNode.insertBefore(liElems[mid], liElems[liElems[mid].idx]) 
      } 
     } 

     var pos = mid < this.idx ? mid : mid + 1; 
     this.parentNode.insertBefore(this, liElems[pos]) 

    }; 
}); 

演示：Fiddle