jq节点的克隆添加

最新推荐文章于 2022-07-12 21:07:45 发布

酷jjs

最新推荐文章于 2022-07-12 21:07:45 发布

阅读量1.8k

点赞数

分类专栏：前端笔记 jquery 文章标签： jq 节点的动态克隆添加

本文链接：https://blog.csdn.net/qq_32584661/article/details/53838895

版权

前端笔记同时被 2 个专栏收录

165 篇文章 2 订阅

订阅专栏

jquery

32 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq节点的克隆添加</title>
    <script src="js/jquery-1.11.1.js"></script>
    <style>
        .boxBox1{overflow:hidden;}
        .box1{width:100px;height:100px;background:red; margin:5px;float:left;}
        .sbox{width:50px;height:50px;background:blue;}
        .box2{width:100px;height:100px;background:yellow; margin:5px;float:left;}

    </style>
</head>
<body>

<div class="boxBox1">
    <div class="box1"><div class="sbox"></div></div>
</div>

<div class="boxBox2">
    <div class="box2" id="box"><div class="sbox"></div></div>
</div>

<script>

for( var i=0;i<5;i++){
    $('.boxBox1').append($('.box1').clone());  //成指数添加克隆
}

for( var i=0;i<5;i++){
    $('.boxBox2').append($('#box').clone());  //成单个添加克隆
}

$('.box2').each(function(){
    $(this).attr('id','box'+$(this).index());  //动态添加id
});

</script>
</body>
</html>