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>

  • 相关阅读:
    内置函数filter()和匿名函数lambda解析
    time&datetime模块详解
    python学习笔记:*args和**kwargs使用原理?
    python学习笔记:深浅拷贝的使用和原理
    python传参是传值还是传引用
    第215天:Angular---指令
    第214天:Angular 基础概念
    第213天:12个HTML和CSS必须知道的重点难点问题
    第212天:15种CSS居中的方式,最全了
    第211天:git和github的区别和使用详解
  • 原文地址:https://www.cnblogs.com/snowhite/p/12912197.html
Copyright © 2011-2022 走看看