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

在jQuery中，我们可以使用after()和before()方法来实现移动HTML的元素节点，改变节点的顺序。

一、基础页面

• 基础页面中是一个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);
    });
});

• 效果展示：