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

Posted libin6505

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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代码

  1. $(function(){
        $(".content li").click(function() {
            if($(this).next())
                $(this).next().after($(this));
        });
    })
  2. 观察效果

  • 初始样式

    技术分享图片

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

    技术分享图片

以上是关于jquery如何实现点击LI标签和下面的LI互换顺序? 超简单代码的主要内容,如果未能解决你的问题,请参考以下文章

jQuery实现多个li点击切换和显示隐藏

Jquery如何给ul下每个li都加上点击事件

将上一个和下一个按钮添加到 li item php 或 jquery

jquery点击li标签之后在该li标签上添加一个class,点击下一个li时删除上一个li的class

jquery 点击当前添加一个样式,在次点击取消这个样式,

jquery怎么在点击li标签之后添加一个在class,点击下一个li时删除上一个class?