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