JS实现一个列表中包含上移下移删除等功能

最近做了一个项目，包括了一个列表页，为了用户体验，操作均使用JS实现，其中包括在列表中实现上移，下移，删除等功能，前台JS，后端数据修改使用AJAX，本文主要说一下前台JS这块

先看一下页面的截图

看一下它的HTML结构，当然，这与前台切图有关，后端程序人员只负责写自己的JS这块，我以我们项目为例，看一下它们切的HTML

<ul><li><div><div><span></span><span>内容<em>1</em>：</span><em href="javascript:;"><span>上移</span></a><a value="253040" href="javascript:;"><span>下移</span></a><a value="253040" href="javascript:;"><span>删除</span></a></div></div></li><li><div><div><span></span><span>内容<em>2</em>：</span><em href="javascript:;"><span>上移</span></a><a value="253041" href="javascript:;"><span>下移</span></a><a value="253041" href="javascript:;"><span>删除</span></a></div></div></li><li><div><div><span></span><span>内容<em>3</em>：</span><em href="javascript:;"><span>上移</span></a><a value="253040" href="javascript:;"><span>下移</span></a><a value="253040" href="javascript:;"><span>删除</span></a></div></div></li><li><div><div><span></span><span>内容<em>4</em>：</span><em href="javascript:;"><span>上移</span></a><a value="253041" href="javascript:;"><span>下移</span></a><a value="253041" href="javascript:;"><span>删除</span></a></div></div></li></ul>

下面我们主要看一下JS代码，主要使用JQ的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>

运行之后，效果就出来了，本JS中没有把与后台交互的AJAX方法写出来，大家可以根据具体情况而定。