ul li 排序移动非常简单

最新推荐文章于 2023-03-02 16:56:30 发布

看世界-Neilson

最新推荐文章于 2023-03-02 16:56:30 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Js

本文链接：https://blog.youkuaiyun.com/qinglianluan/article/details/38439367

Js 专栏收录该内容

12 篇文章

订阅专栏

本文提供了一种简化网页元素管理的方法，包括上移、下移和删除操作，通过JavaScript实现，帮助开发者提高工作效率。

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

<ul class = "exam">
<li><a class='up fright'>上移</a><a class='dwn fright'>下移</a><a class='delete fright'>删除</a></li>
<li><a class='up fright'>上移</a><a class='dwn fright'>下移</a><a class='delete fright'>删除</a></li>
<li><a class='up fright'>上移</a><a class='dwn fright'>下移</a><a class='delete fright'>删除</a></li>
<li><a class='up fright'>上移</a><a class='dwn fright'>下移</a><a class='delete fright'>删除</a></li>
<li><a class='up fright'>上移</a><a class='dwn fright'>下移</a><a class='delete fright'>删除</a></li>
<li><a class='up fright'>上移</a><a class='dwn fright'>下移</a><a class='delete fright'>删除</a></li>
<li><a class='up fright'>上移</a><a class='dwn fright'>下移</a><a class='delete fright'>删除</a></li>
</ul>
<script>
$("ul li a.up").click(function(){
var $li = $(this).parent().parent()
if($li.prev().size()>0){
$li.prev().before($li)
}
});
$("ul li a.dwn").click(function(){
var $li = $(this).parent().parent()
if($li.next().size()>0){
$li.next().after($li)
}
});
$("ul li a.delete").click(function(){
$(this).parent().parent().remove();
});
</script>