一、基础页面
基础页面中是一个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
随时随地看视频
