使用js实现上移、下移、置顶、置底功能及源码案例

来源：互联网发布：淘宝关键词竞争指数编辑：程序博客网时间：2024/06/05 02:09

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>使用js实现上移、下移、置顶、置底功能及源码案例</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"><script src="jquery-1.8.2.min.js"></script><style> .demo li{line-height: 30px;border-bottom: 1px solid #000;} .demo li a{padding: 0 20px;}</style></head><body><ul class="demo"> <li>001 <a href="#" class="up">上移</a><a href="#" class="down">下移</a><a href="#" class="top">置顶</a><a href="#" class="bottom">置底</a></li> <li>002 <a href="#" class="up">上移</a><a href="#" class="down">下移</a><a href="#" class="top">置顶</a><a href="#" class="bottom">置底</a></li> <li>003 <a href="#" class="up">上移</a><a href="#" class="down">下移</a><a href="#" class="top">置顶</a><a href="#" class="bottom">置底</a></li> <li>004 <a href="#" class="up">上移</a><a href="#" class="down">下移</a><a href="#" class="top">置顶</a><a href="#" class="bottom">置底</a></li></ul><script> $(".demo").on('click', 'a', function(event) {  event.preventDefault;  var parent=$(this).parent();  var parents=$(this).parents(".demo");  var len=parents.children().length;  if(($(this).is(".up") || $(this).is(".top")) && parent.index()==0){   alert("已经置顶！");   return false;  }else if(($(this).is(".down") || $(this).is(".bottom")) && parent.index()==len-1){   alert("已经置底！");   return false;  }  switch (true) {   case $(this).is(".up"):    var prev = parent.prev();    parent.insertBefore(prev);    break;   case $(this).is(".down"):    var next = parent.next();    parent.insertAfter(next);    break;   case $(this).is(".top"):    parents.prepend(parent);    break;   case $(this).is(".bottom"):    parents.append(parent);    break;  }  alert("操作完成！！"); });</script></body></html>

实际效果如下图
这里写图片描述

0 0