jq做上移下移删除置顶

最新推荐文章于 2020-08-21 22:52:30 发布

喊我小垚女

最新推荐文章于 2020-08-21 22:52:30 发布

阅读量304

点赞数

分类专栏： js 文章标签： js 上移删除

本文链接：https://blog.csdn.net/weixin_37035452/article/details/103036061

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
</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>
            <a href="#" class="delate">删除</a>
        </li>
        <li>002
            <a href="#" class="up">上移</a>
            <a href="#" class="down">下移</a>
            <a href="#" class="top">置顶</a>
            <a href="#" class="bottom">置底</a>
            <a href="#" class="delate">删除</a>
        </li>
        <li>003
            <a href="#" class="up">上移</a>
            <a href="#" class="down">下移</a>
            <a href="#" class="top">置顶</a>
            <a href="#" class="bottom">置底</a>
            <a href="#" class="delate">删除</a>
        </li>
        <li>004
            <a href="#" class="up">上移</a>
            <a href="#" class="down">下移</a>
            <a href="#" class="top">置顶</a>
            <a href="#" class="bottom">置底</a>
            <a href="#" class="delate">删除</a>
        </li>
    </ul>
</body>

</html>
<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;
            case $(this).is(".delate"):
                parent.remove();//删除
                break;
        }
        alert("操作完成！！");
    });
</script>

<!-- <script>
       $(".demo").on('click', 'a', function(event) {
        //    console.log(event);
           var parent=$(this).parent();
           var prev = parent.prev();
           prev.before(parent);
           console.log(parent)

       })
</script> -->

喊我小垚女

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq做上移下移删除置顶

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫