jQuery语法——移动节点，改变节点顺序

一、基础页面

• 基础页面中是一个ul列表，我们以改变其中的红色<li>标签为例，演示如何使用jQuery改变元素节点的顺序。基础页面如下：

• HTML代码：

<button class="move-up">上移</button><button class="move-down">下移</button><ul class="box">
    <li>我是一个普通的li标签</li>
    <li>我是一个普通的li标签</li>
    <li>我是一个普通的li标签</li>
    <li>我是一个普通的li标签</li>
    <li>我是一个普通的li标签</li>
    <li>我是一个普通的li标签</li>
    <li>我是一个普通的li标签</li>
    <li>我是一个普通的li标签</li>
    <li>我是一个普通的li标签</li>
    <li class="move">我是会动的li标签</li></ul>

• CSS代码：

button{    width: 100px;    height: 30px;    display: inline-block;    border-radius: 10px;    border: none;    background-color: #0d3349;    color: #fff;
}.move{    color: red;    font-weight: bolder;
}

二、向上移动元素节点

$(function(){
    $('.move-up').click(function(){        var cur_li = $('.move');        var prev_li = cur_li.prev();     // 获取当前节点的上一个节点
        // 把当前节点插入到上一个节点之前，如果不存在上一个节点，说明已经到达顶部
        if(prev_li.length != 0){
            prev_li.before(cur_li);
        }        else {
            alert("元素已经到顶部!");
        }
    });
    
});

三、向下移动元素节点

$(function(){
    $('.move-down').click(function(){        var cur_li = $('.move');        var next_li = cur_li.next();     // 获取当前节点的下一个节点
        // 把当前节点插入到下一个节点之后，如果不存在下一个节点，说明已经到达底部
        if(next_li.length != 0){
            next_li.after(cur_li);
        }        else {
            alert("元素节点已经到底部!");
        }
    });

效果演示：

四、将元素移动到顶部/底部

• 其实，将元素移动到顶部和底部是非常简单的。

• 移动到顶部：只需要获取当前ul中的第一个li标签，然后将该元素插入第一个标签之前即可完成。

• 移动到底部：获取当前ul中的最后一个li标签，然后将钙元素插入到最后一个标签之后即可完成。

• 示例代码：

$(function () {    // 移动到顶部
    $('.go-up').click(function () {        var cur_li = $('.move');        var first_li = $('.box li').eq(0);
        first_li.before(cur_li);
    });    
    // 移动到底部
    $('.go-down').click(function () {        var cur_li = $('.move');        var last_li = $('.box li').last();
        last_li.after(cur_li);
    });
});

• 效果展示：

作者：振礼硕晨
链接：https://www.jianshu.com/p/60bf41f513f8