用jquery做一个列表上下移动和置顶/低_jquery上下移动-优快云博客

本文链接：https://blog.youkuaiyun.com/leiyanhongfhc/article/details/77543347

这个示例演示了如何使用jQuery实现列表项的上下移动、置顶和置底功能。通过点击链接，相应的列表项会淡出并重新定位到新的位置，同时高亮显示移动后的项。此外，还提供了删除功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表上下移动和置顶/低</title>
<script src="js/jquery.min.js"></script>
<style type="text/css">
.active{
background: pink;
}
p {
width: 400px;

}

</style>
</head>
<body>
<div class="herder">
<p>
<span class="nav">黄总</span>
<a href="javascript:;" class="up" javascript:;="">上移</a>
<a href="javascript:;" class="down">下移</a>
<a href="javascript:;" class="top">置顶</a>
<a href="javascript:;" class="bottom">置底</a>
<a href="javascript:;" class="delete">删除</a>
</p>
<p>
<span class="nav">不知火舞</span>
<a href="javascript:;" class="up" javascript:;="">上移</a>
<a href="javascript:;" class="down">下移</a>
<a href="javascript:;" class="top">置顶</a>
<a href="javascript:;" class="bottom">置底</a>
<a href="javascript:;" class="delete">删除</a>
</p>
<p>
<span class="nav">东皇太一</span>
<a href="javascript:;" class="up" javascript:;="">上移</a>
<a href="javascript:;" class="down">下移</a>
<a href="javascript:;" class="top">置顶</a>
<a href="javascript:;" class="bottom">置底</a>
<a href="javascript:;" class="delete">删除</a>
</p>
<p>
<span class="nav">武则天</span>
<a href="javascript:;" class="up" javascript:;="">上移</a>
<a href="javascript:;" class="down">下移</a>
<a href="javascript:;" class="top">置顶</a>
<a href="javascript:;" class="bottom">置底</a>
<a href="javascript:;" class="delete">删除</a>
</p>

</div>
<script type="text/javascript">
$(function () {
//上移
var Up = $(".up");
Up.click(function() {
var a = $(this).parents("p");
a.fadeOut().fadeIn();//消失、出现
a.addClass("active").siblings().removeClass("active");
// //prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的。
//before() 方法在被选元素前插入指定的内容。
a.prev().before(a);
});

//下移
var Down = $(".down");
Down.click(function() {
var b = $(this).parents("p");//parents()获得当前匹配元素集中每个元素的祖先元素，使用选择器进行筛选
b.fadeOut().fadeIn();//消失、出现
b.addClass("active").siblings().removeClass("active");
b.next().after(b); //after() 方法在被选元素后插入指定的内容。
})
//置顶
var Top = $(".top");
Top.click(function() {
var c = $(this).parents("p");
//fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。// fadeIn() 用于淡入已隐藏的元素。
c.fadeOut().fadeIn(); //消失、出现
c.addClass("active").siblings().removeClass("active");
$("div").prepend(c); //prepend() 方法在被选元素的开头（仍位于内部）插入指定内容。
});

//置底
var Bottom = $(".bottom");
Bottom.click(function() {
var d = $(this).parents("p");
d.fadeOut().fadeIn();//消失、出现
d.addClass("active").siblings().removeClass("active");
$("#main").append(d); //prepend() 方法在被选元素的开头（仍位于内部）插入指定内容。
})

//删除
var Delete = $(".delete");
Delete.click(function() {
var e = $(this).parents("p");
e.fadeOut().fadeIn();//消失、出现
e.addClass("active").siblings().removeClass("active");
e.remove();//隐藏
});

})

</script>
</body>
</html>