jQuery实现上移,下移效果

htmlbu部分:

 <div class="box">
        <p>首页1
            <button class="moveup">点击上移</button>
            <button class="movedown">点击下移</button>
        </p>
        <p>详情2
            <button class="moveup">点击上移</button>
            <button class="movedown">点击下移</button>
        </p>
        <p>内容3
            <button class="moveup">点击上移</button>
            <button class="movedown">点击下移</button>
        </p>
        <p>中心4
            <button class="moveup">点击上移</button>
            <button class="movedown">点击下移</button>
        </p>
    </div>

css部分

 .box{
            width: 80%;
            height: 380px;
            border: 2px solid pink;
        }
        .box p{
            width: calc(80% - 20px);
            height: 80px;
            margin: 2px auto;
            background-color: yellowgreen;
        }
        .box p:nth-child(2n){
            background-color: pink;
        }
        .box p .moveup{
            width: 100px;
            height: 40px;
            border: none;
            color: #fff;
            border-radius: 8px;
            margin-left: calc(60% - 20px);
            margin-top: 20px;
            font-size: 14px;
            background-color: #3b8cbd;
        }
        .box p .movedown{
            width: 100px;
            height: 40px;
            border: none;
            color: #fff;
            border-radius: 8px;
            font-size: 14px;
            background-color: #3b8cbd;
        }

js部分

<script src="./jquery.min.js"></script>//项目在要引入Jquery
<script>
    //上移方法
    $('.moveup').click(function (e) {
        let dom=$(e.target).parent()
        if(dom.prev().length==0){
            alert('已经是顶层了,无法移动了')
            return
        }else{
            dom.prev().insertAfter(dom);  

        }
      })

//下移方法
$('.movedown').click(function (e) {
        let dom=$(e.target).parent()
        if(dom.next().length==0){
            alert('已经是底层了,无法移动了')
            return
        }else{
            dom.next().insertBefore(dom);  

        }
      })
</script>

实现效果(样式随便写的,有点丑):