js操作标签调换顺序,添加类似收款地址样式

最新推荐文章于 2022-09-01 16:47:41 发布

藏不戈

最新推荐文章于 2022-09-01 16:47:41 发布

阅读量1k

点赞数

分类专栏： css js

css 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

js远远不止如此的强大

直接上代码

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
<style>
    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;
    }
</style>
</head>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js">
    </script>
<body>

<p>这是一些文本。</p>
<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>
<script>
$(function(){
    $(".content li").click(function() {
        if($(this).next())
        $(this).next().after($(this));
    });
})
</script>
</body>
</html>

效果图片,点击li标签后会和下一个标签进行位置交换:

这里写图片描述

个人使用,获取子标签

// 选择第20个ul标签
            $('.trends-ul>ul:nth-child(20)').next().after($('.trends-ul>ul:nth-child(20)'));

藏不戈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js操作标签调换顺序,添加类似收款地址样式

js远远不止如此的强大直接上代码html>head> meta charset="utf-8"> title>title> style> div.box{ width:300px; padding:20px; margin:20px; border:4px dashed #ccc; } d
复制链接

扫一扫

专栏目录