基于jQuery on方法实现列表上移下移与删除功能
作者：键盘侠时间：2026-10-28 14:22:41浏览：562
本文介绍如何利用jQuery的on方法实现列表项的上移、下移及删除功能。针对静态与动态数据混合场景，通过事件委托机制绑定点击事件，结合DOM操作完成元素位置交换与移除，并预留AJAX接口以同步后端数据。
列表交互功能概述
近期开发的项目包含一个列表页面，为提升用户体验，所有交互操作均在前端通过JavaScript完成。功能涵盖列表项的上移、下移及删除，前端逻辑由JS处理，后端数据同步则通过AJAX实现。本文重点阐述前端JS部分的实现细节。
首先展示页面效果截图。
接着分析页面的HTML结构。该结构取决于前端切图，后端开发人员仅负责编写对应的JS逻辑。以下以本项目为例，展示切图生成的HTML结构。
<ul class="clearfix">
<li class="courseList">
<div class="titDefault clearfix">
<div class="left clearfix">
<span class="dragBtn"></span><span class="tit">内容<em class="contIndex">1</em>：</span><em title="2013年 加班.txt" class="titDefaultName">2013年 加班.txt</em>
</div>
<div class="mid">2014/9/24 9:54:00</div>
<div class="right clearfix">
<a value="253040" class="moveUpBtn" href="javascript:;"><span class="delTit">上移</span></a>
<a value="253040" class="moveDownBtn" href="javascript:;"><span class="delTit">下移</span></a>
<a value="253040" class="deleteBtn" href="javascript:;"><span class="delTit">删除</span></a>
</div>
</div>
</li>
<li class="courseList">
<div class="titDefault clearfix">
<div class="left clearfix">
<span class="dragBtn"></span><span class="tit">内容<em class="contIndex">2</em>：</span><em title="使用说明.txt" class="titDefaultName">使用说明.txt</em>
</div>
<div class="mid">2014/9/24 9:54:00</div>
<div class="right clearfix">
<a value="253041" class="moveUpBtn" href="javascript:;"><span class="delTit">上移</span></a>
<a value="253041" class="moveDownBtn" href="javascript:;"><span class="delTit">下移</span></a>
<a value="253041" class="deleteBtn" href="javascript:;"><span class="delTit">删除</span></a>
</div>
</div>
</li>
<li class="courseList">
<div class="titDefault clearfix">
<div class="left clearfix">
<span class="dragBtn"></span><span class="tit">内容<em class="contIndex">3</em>：</span><em title="占占大师.txt" class="titDefaultName">占占大师.txt</em>
</div>
<div class="mid">2014/9/24 9:54:00</div>
<div class="right clearfix">
<a value="253040" class="moveUpBtn" href="javascript:;"><span class="delTit">上移</span></a>
<a value="253040" class="moveDownBtn" href="javascript:;"><span class="delTit">下移</span></a>
<a value="253040" class="deleteBtn" href="javascript:;"><span class="delTit">删除</span></a>
</div>
</div>
</li>
<li class="courseList">
<div class="titDefault clearfix">
<div class="left clearfix">
<span class="dragBtn"></span><span class="tit">内容<em class="contIndex">4</em>：</span><em title="排序问题.txt" class="titDefaultName">排序问题.txt</em>
</div>
<div class="mid">2014/9/24 9:54:00</div>
<div class="right clearfix">
<a value="253041" class="moveUpBtn" href="javascript:;"><span class="delTit">上移</span></a>
<a value="253041" class="moveDownBtn" href="javascript:;"><span class="delTit">下移</span></a>
<a value="253041" class="deleteBtn" href="javascript:;"><span class="delTit">删除</span></a>
</div>
</div>
</li>
</ul>jQuery on方法实现DOM操作
核心逻辑通过jQuery的on方法实现。由于列表数据初始为静态绑定（bind），排序后变为动态生成（live），使用on方法能更合理地处理事件委托。具体代码见下。
<script type="text/ecmascript">
$(function () {
//上移
$(".clearfix").on("click", ".moveUpBtn", function () {
var self = $(this);
var _old = self.closest("li.courseList");
var _new = self.closest("li.courseList").prev("li");
if (_new.length > 0) {
var _temp = _old.html();
_old.empty().append(_new.html());
_new.empty().append(_temp);
}
});
//下移
$(".clearfix").on("click", ".moveDownBtn", function () {
var self = $(this);
var _old = self.closest("li.courseList");
var _new = self.closest("li.courseList").next("li");
if (_new.length > 0) {
var _temp = _old.html();
_old.empty().append(_new.html());
_new.empty().append(_temp);
}
});
//删除
$(".clearfix").on("click", ".deleteBtn", function () {
var self = $(this);//当前click事件源对象
self.closest("li.courseList").remove();
});
});
</script>运行后即可看到交互效果。本示例未包含与后端交互的AJAX代码，开发者可根据实际需求自行补充相关逻辑。
作者最新文章
免登录快速分享代码：适合面试协作的轻量级JS在线运行工具推荐
2026-11-05 14:45:59
JS空字符串和纯空格转浮点数的结果是什么
2026-11-05 11:04:42
JS在线格式化缩进混乱怎么办？配置项调整技巧
2026-11-04 23:27:25
JS怎么获取秒级时间戳
2026-11-03 21:45:29
JS时间戳怎么从毫秒转换为秒
2026-11-03 20:04:14