转：
上面的效果涉及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.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互换顺序
jquery如何实现点击LI标签和下面的LI互换顺序？ 超简单代码
原文：https://www.cnblogs.com/libin6505/p/10237727.html