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>

  • 相关阅读:
    P4718 [模板]Pollard-Rho算法
    python爬虫模板
    Codeforces1248F. Catowice City
    P3980 [NOI2008]志愿者招募 (费用流)
    P2805 [NOI2009]植物大战僵尸 (拓扑排序 + 最小割)
    P3157 [CQOI2011]动态逆序对
    P2634 [国家集训队]聪聪可可 (点分治)
    HDU6703 array (线段树)
    Codeforces750E. New Year and Old Subsequence (线段树维护DP)
    Codeforces301D. Yaroslav and Divisors
  • 原文地址:https://www.cnblogs.com/snowhite/p/12912197.html
Copyright © 2011-2022 走看看