在jQuery中，我們可以使用after()和before()方法來(lái)實(shí)現(xiàn)移動(dòng)HTML的元素節(jié)點(diǎn)，改變節(jié)點(diǎn)的順序。

一、基礎(chǔ)頁(yè)面

• 基礎(chǔ)頁(yè)面中是一個(gè)ul列表，我們以改變其中的紅色<li>標(biāo)簽為例，演示如何使用jQuery改變?cè)毓?jié)點(diǎn)的順序。基礎(chǔ)頁(yè)面如下：

• HTML代碼：

<button class="move-up">上移</button>
<button class="move-down">下移</button>

<ul class="box">
    <li>我是一個(gè)普通的li標(biāo)簽</li>
    <li>我是一個(gè)普通的li標(biāo)簽</li>
    <li>我是一個(gè)普通的li標(biāo)簽</li>
    <li>我是一個(gè)普通的li標(biāo)簽</li>
    <li>我是一個(gè)普通的li標(biāo)簽</li>
    <li>我是一個(gè)普通的li標(biāo)簽</li>
    <li>我是一個(gè)普通的li標(biāo)簽</li>
    <li>我是一個(gè)普通的li標(biāo)簽</li>
    <li>我是一個(gè)普通的li標(biāo)簽</li>
    <li class="move">我是會(huì)動(dòng)的li標(biāo)簽</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;
}

二、向上移動(dòng)元素節(jié)點(diǎn)

$(function(){
    $('.move-up').click(function(){
        var cur_li = $('.move');
        var prev_li = cur_li.prev();     // 獲取當(dāng)前節(jié)點(diǎn)的上一個(gè)節(jié)點(diǎn)
        // 把當(dāng)前節(jié)點(diǎn)插入到上一個(gè)節(jié)點(diǎn)之前，如果不存在上一個(gè)節(jié)點(diǎn)，說(shuō)明已經(jīng)到達(dá)頂部
        if(prev_li.length != 0){
            prev_li.before(cur_li);
        }
        else {
            alert("元素已經(jīng)到頂部!");
        }
    });
    
});

三、向下移動(dòng)元素節(jié)點(diǎn)

$(function(){
    $('.move-down').click(function(){
        var cur_li = $('.move');
        var next_li = cur_li.next();     // 獲取當(dāng)前節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)
        // 把當(dāng)前節(jié)點(diǎn)插入到下一個(gè)節(jié)點(diǎn)之后，如果不存在下一個(gè)節(jié)點(diǎn)，說(shuō)明已經(jīng)到達(dá)底部
        if(next_li.length != 0){
            next_li.after(cur_li);
        }
        else {
            alert("元素節(jié)點(diǎn)已經(jīng)到底部!");
        }
    });

效果演示：

四、將元素移動(dòng)到頂部/底部

• 其實(shí)，將元素移動(dòng)到頂部和底部是非常簡(jiǎn)單的。
• 移動(dòng)到頂部：只需要獲取當(dāng)前ul中的第一個(gè)li標(biāo)簽，然后將該元素插入第一個(gè)標(biāo)簽之前即可完成。
• 移動(dòng)到底部：獲取當(dāng)前ul中的最后一個(gè)li標(biāo)簽，然后將鈣元素插入到最后一個(gè)標(biāo)簽之后即可完成。
• 示例代碼：

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

• 效果展示：