zoukankan      html  css  js  c++  java
  • js实现上移 下移 置顶 置底操作

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/1.8.2/jquery.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>

  • 相关阅读:
    Weblogic学习笔记
    Shiro权限使用
    Shiro权限框架使用总结
    支付宝接口文档说明
    代码模拟实现十六进制转二进制
    代码模拟实现十六进制转换十进制
    四种内部类详细解释和代码示例
    Struts2_struts.xml写法和用法例子
    spring一些方法和用法例子
    Hibernate一些_方法_@注解_代码示例
  • 原文地址:https://www.cnblogs.com/snowhite/p/12912197.html
Copyright © 2011-2022 走看看