jquery实现元素上下调换

qq_扛着榔头

已于 2022-08-07 02:44:31 修改

阅读量416

点赞数

文章标签： servlet 前端 html

于 2022-08-07 02:43:26 首次发布

本文链接：https://blog.csdn.net/qq_32253969/article/details/126204549

版权

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>上下调换</title>
    <style>
        li{background-color: #999;list-style: none;line-height: 30px}
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
    <li id="l1">111 <button onclick="upgo($(this))" type="button">上移</button> <button onclick="downgo($(this))" type="button">下移</button></li>
    <li id="l2">222 <button onclick="upgo($(this))" type="button">上移</button> <button onclick="downgo($(this))" type="button">下移</button></li>
    <li id="l3">333 <button onclick="upgo($(this))" type="button">上移</button> <button onclick="downgo($(this))" type="button">下移</button></li>
    <li id="l4">444 <button onclick="upgo($(this))" type="button">上移</button> <button onclick="downgo($(this))" type="button">下移</button></li>
    <li id="l5">555 <button onclick="upgo($(this))" type="button">上移</button> <button onclick="downgo($(this))" type="button">下移</button></li>
</ul>
<ul>
    <li id="q1">111 <button onclick="upgo($(this))" type="button">上移</button> <button onclick="downgo($(this))" type="button">下移</button></li>
    <li id="q2">222 <button onclick="upgo($(this))" type="button">上移</button> <button onclick="downgo($(this))" type="button">下移</button></li>
</ul>
<script>
    //上移
    function upgo(q){
        let que_down = q.closest('li'); //底下的元素
        let que_up = que_down.prev("li"); //上面的哥哥元素
        if (que_down.length == 1 && que_up.length == 1) {
            que_down.detach().insertBefore(que_up);
        }
    }
    //下移
    function downgo(q){
        let que_up = q.closest('li');
        let que_down = que_up.next();
        if(que_up.length==1 && que_down.length==1){
            que_up.detach().insertAfter(que_down);
        }
    }
</script>
</body>
</html>

这里用到了两个函数

1 insertBefore();

2 insertAfter()