jQuery——clone()方法

最新推荐文章于 2024-07-30 03:20:25 发布

桃花扇J

最新推荐文章于 2024-07-30 03:20:25 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/weixin_44584442/article/details/104727570

版权

jQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

作用：创建一个匹配的元素集合的深度拷贝副本（可拷贝元素样式、属性）

【例】填写下列表格（克隆元素并添加内容)

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            text-align: center;
            width: 300px;
        }
        th {
            width: 100px;
        }
        .demo {
            display: none;
        }
    </style>
</head>

<body>
    <table class="stb" border="1">
        <tr>
            <th>name</th>
            <th>age</th>
            <th>sex</th>
        </tr>
        <tr class="demo">
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
<script src="./jquery.js"></script>
<script>
    //模拟json数据
    var studArr = [
        {
            name: 'jwh',
            age: '18',
            sex: 'female'
        },
        {
            name: 'dqs',
            age: '23',
            sex: 'male'
        },
        {
            name: 'ly',
            age: '23',
            sex: 'female'
        }
    ];
    var wrapper = $('.stb')
    studArr.forEach(function (ele, index) {
        var cloneDom = $('.demo').clone().removeClass('demo')
        cloneDom
            .find('td')
                .eq(0)
                    .text(ele.name)
                        .next()
                            .text(ele.age)
                                .next()
                                    .text(ele.sex);
        cloneDom.appendTo(wrapper);
    });

</script>

</html>

结果

【注】事件不能克隆，如下例，创建一个div如下图

绑定点击事件并克隆该div如下

$('.demo').click(function () {
    console.log(1);
}).clone().css({backgroundColor: 'teal'}).appendTo('body');

结果

即，点击事件并未克隆到新的div上

桃花扇J

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录