JavaScript 调整li元素上下顺序

快乐打工仔 分类:实例代码

分享一段代码实例,他实现了点击按钮来调整li元素上下顺序的功能。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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.pipipi.net</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()一章节。

JavaScript 调整li元素上下顺序,这样的场景在实际项目中还是用的比较多的,关于JavaScript 调整li元素上下顺序就介绍到这了。

JavaScript 调整li元素上下顺序属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容