jquery如何实现点击LI标签和下面的LI互换顺序？ 超简单代码

转：

jquery如何实现点击LI标签和下面的LI互换顺序？

 

 

上面的效果涉及jquery的两个方法：

• next()  ：  获得匹配元素集合中每个元素紧邻的下一个同胞元素。

• after() ：在被选元素后插入指定的内容。

综合起来，核心代码为

$( ".content li" ).click( function () {        // 点击li元素时      if ($( this ).next())                     // 如果存在下一个元素          $( this ).next().after($( this ));     // 就将此元素插到下一个元素之后，从而实现互换顺序 })

实例演示：点击LI标签和下面的LI互换顺序

1. 创建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代码

3. $( function (){      $( ".content li" ).click( function () {          if ($( this ).next())              $( this ).next().after($( this ));      }); })

4. 观察效果

• 初始样式

  

• 点击Tane这个li标签后的效果，注意已经和John互换顺序

  

转载于:https://www.cnblogs.com/libin6505/p/10237727.html