转：
上面的效果涉及jquery的两个方法：
next() ： 获得匹配元素集合中每个元素紧邻的下一个同胞元素。
after() ：在被选元素后插入指定的内容。
综合起来，核心代码为
$( ".content li" ).click( function () { // 点击li元素时 if ($( this ).next()) // 如果存在下一个元素 $( this ).next().after($( this )); // 就将此元素插到下一个元素之后，从而实现互换顺序 }) |
实例演示：点击LI标签和下面的LI互换顺序
创建Html元素
< div class = "box" > < span >点击li则下移一位：</ span > < div class = "content" > < ul > < li >Glen</ li > < li >Tane</ li > < li >Jhon</ li > < li >Ralph</ li > </ ul > </ div > </ div > |
设置css样式
div.box{ width : 300px ; padding : 20px ; margin : 20px ; border : 4px dashed #ccc ;} div.box span{ color : #999 ; font-style : italic ;} div.content{ width : 250px ; margin : 10px 0 ; padding : 20px ; border : 2px solid #ff6666 ;} |
编写jquery代码
$( function (){ $( ".content li" ).click( function () { if ($( this ).next()) $( this ).next().after($( this )); }); }) |
观察效果
初始样式
点击Tane这个li标签后的效果，注意已经和John互换顺序
