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互换顺序