转：
jquery如何实现点击LI标签和下面的LI互换顺序？
上面的效果涉及jquery的两个方法：
next() ： 获得匹配元素集合中每个元素紧邻的下一个同胞元素。
after() ：在被选元素后插入指定的内容。
综合起来，核心代码为
$(".content li").click(function() { // 点击li元素时 if($(this).next()) // 如果存在下一个元素 $(this).next().after($(this)); // 就将此元素插到下一个元素之后，从而实现互换顺序}) |
实例演示：点击LI标签和下面的LI互换顺序
创建Html元素
<divclass="box"><span>点击li则下移一位：</span><divclass="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:4pxdashed#ccc;}div.box span{color:#999;font-style:italic;}div.content{width:250px;margin:10px0;padding:20px;border:2pxsolid#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