js上移、下移、置顶、置底操作
2017-11-24 13:45
639 查看
两种简单的JQ操作,代码如下:
<!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 type="text/javascript" src="js/jquery-1.12.4.min.js"></script> --> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.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);//把当前元素,放在前一个前边 prev.before(parent); break; case $(this).is(".down"): var next = parent.next(); //parent.insertAfter(next); next.after(parent); break; case $(this).is(".top"): parents.prepend(parent);//把当前元素,放在最前边 break; case $(this).is(".bottom"): parents.append(parent);//内部结尾添加元素 break; } alert("操作完成!!"); }); </script> </body> </html>
相关文章推荐
- js操作表格操方法,增加,删除行,上移,下移一行选定行
- js_上移_下移_置顶_置地
- 对表数据进行(置顶,上移,下移,置底操作)---数据库sql
- 关于js select 上移,下移,置顶,置底
- JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
- 对表数据进行(置顶,上移,下移,置底操作)---数据库sql
- 使用js实现上移、下移、置顶、置底功能及源码案例
- js实现上移、下移置顶
- js操作table(增加行,删除行,上移,下移,复制行)
- js实现上移下移效果
- JS实现点击上移下移LI行数据的方法
- Vue.js实现一个todo-list的上移下移删除功能
- js表格操作类(添加一行,删除一行,排序,上移选定行,下移选定行)
- jquery 操作table使tr(数据)整行上移下移
- js实现Select列表各项上移和下移的方法
- JS实现的表格操作类详解(添加,删除,排序,上移,下移)
- [置顶] Js获取当前日期时间及其它操作
- jquery实现标签上移、下移、置顶
- 怎么在datagridview中对记录进行上移或下移操作?
- js jquery 数组的上移下移置顶置底