在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);
});
});
- 效果展示：
