JavaScript 調整li元素上下順序

admin發表於2017-04-15
JavaScript

分享一段程式碼例項，他實現了點選按鈕來調整li元素上下順序的功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.box {
  width: 500px;
  margin: 0 auto;
  padding: 0;
}
ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.box ul li {
  height: 30px;
  line-height: 30px;
  background: #eee;
  margin-top: 10px;
}
.box ul li em {
  font-style: normal;
  width: 370px;
  display: inline-block;
}
.box ul li a {
  padding: 0 10px;
}
</style>
<script>
window.onload = function () {
  var oUl = document.getElementsByTagName("ul")[0];
  var oBtn = document.getElementsByTagName("a");
  for (var index = 0; index < oBtn.length; index++) {
    if (index % 2) {
      oBtn[index].onclick = function () {
        var oPar = this.parentNode;
        if (oPar == oUl.children[oUl.children.length - 1]) {
          alert('到底了，不能再點了！');
          return false;
        }
        var oNext = oPar.nextElementSibling || oPar.nextSibling;
        var oNext2 = oNext.nextElementSibling || oNext.nextSibling;
        oUl.insertBefore(oPar, oNext2)
      }
    } else {
      oBtn[index].onclick = function () {
        var oPar = this.parentNode;
        if (oPar == oUl.children[0]) {
          alert('到頂了，不能再點了！');
          return false;
        }
        var oPvr = oPar.previousElementSibling || oPar.previousSibling;
        oUl.insertBefore(oPar, oPvr);
      }
    }
  }
}
</script>
</head>
<body>
<div class="box" id="box">
  <ul>
    <li><a href="javascript:;">上移</a><em>螞蟻部落歡迎您</em><a href="javascript:;">下移</a></li>
    <li><a href="javascript:;">上移</a><em>本站的url地址是www.softwhy.com</em><a href="javascript:;">下移</a></li>
    <li><a href="javascript:;">上移</a><em>只有努力才會有美好的未來</em><a href="javascript:;">下移</a></li>
    <li><a href="javascript:;">上移</a><em>分享和互助才能推動個人的進步</em><a href="javascript:;">下移</a></li>
    <li><a href="javascript:;">上移</a><em>這是一個簡單的效果</em><a href="javascript:;">下移</a></li>
  </ul>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.window.onload = function () {}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var oUl = document.getElementsByTagName("ul")[0]，獲取集合中的第一個ul元素物件。

（3）.var oBtn = document.getElementsByTagName("a")，獲取連結a元素集合。

（4）.for (var index = 0; index < oBtn.length; index++) {},遍歷每一個連結a元素。

（5）.if (index % 2) ，如果索引值為奇數，也就是右側的連結。

（6）.oBtn[index].onclick = function () {}，為連結a元素註冊click事件處理函式。

（7）.var oPar = this.parentNode，獲取當前連結a元素的父元素，也就是所在的li元素。

（8）.if (oPar == oUl.children[oUl.children.length - 1]) {

  alert('到底了，不能再點了！');

  return false;

}，如果當前所在的li元素的索引值等於oUl.children.length - 1，也就說明到底了。

（9）.var oNext = oPar.nextElementSibling || oPar.nextSibling，獲取oPar的下一個節點，如果支援nextElementSibling則獲取元素節點，否則使用nextSibling獲取節點（這時候可能是空白或者元素節點）。

（10）.var oNext2 = oNext.nextElementSibling || oNext.nextSibling，和上面是一樣的道理。

（11）.oUl.insertBefore(oPar, oNext2)，將opar元素插入到它後面節點緊鄰的節點前面，如果有節點1,2,3,那麼就是將1節點插入到2節點後面的節點3的前面，也就是插入到2和3之間。

二.相關閱讀:

（1）.getElementsByTagName()參閱document.getElementsByTagName()一章節。

（2）.parentNode參閱JavaScript parentNode一章節。

（3）.children參閱JavaScript children一章節。

（4）.nextElementSibling參閱JavaScript nextElementSibling一章節。

（5）.nextSibling參閱JavaScript nextSibling一章節。

（6）.previousSibling參閱JavaScript previousSibling一章節。

（7）.previousElementSibling參閱JavaScript previousElementSibling一章節。

（8）.insertBefore()參閱JavaScript insertBefore()一章節。

相關文章