交换li的位置

最新推荐文章于 2022-05-11 10:45:02 发布

刘小筛

最新推荐文章于 2022-05-11 10:45:02 发布

阅读量1.9k

点赞数

分类专栏： Javascript HTML 前端文章标签： jquery javascript li

本文链接：https://blog.csdn.net/lhjbk/article/details/112254994

版权

Javascript 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

前端

17 篇文章 0 订阅

订阅专栏

HTML

7 篇文章 0 订阅

订阅专栏

<ul>
    <li class="pars">
         <div class="stream-item" data-id="__k__">
             <div class="stream-video" id="video-__k__"></div>
             <div class="stream-info"><pre></pre></div>
             <div class="stream-mask"></div>
             <div class="userid"><pre></pre></div>
         </div>
    </li>
    <li class="pars">
         <div class="stream-item" data-id="__k__">
             <div class="stream-video" id="video-__k__"></div>
             <div class="stream-info"><pre></pre></div>
             <div class="stream-mask"></div>
             <div class="userid"><pre></pre></div>
         </div>
     </li>
     <li class="pars">
         <div class="stream-item" data-id="__k__">
             <div class="stream-video" id="video-__k__"></div>
             <div class="stream-info"><pre></pre></div>
             <div class="stream-mask"></div>
             <div class="userid"><pre></pre></div>
         </div>
     </li>
</ul>

jquery实现：点击li，使其与第一个li交换位置：

$("ul").on("click", "li", function(e) {
    $(this).before($(".participants ul li:eq(0)")); //将第一个li元素插入到所选li的前面
    $(".participants ul li:eq(0)").before(this); //将所选元素放到第一个li元素的前面
    $('ul li:eq(1) .userid pre').html($('ul li:eq(0) .userid pre').html())
})

根据实际情况，改变 li:eq(0) 括号中的值，即可实现与指定位置的li元素进行位置交换。