jQuery的克隆方法clone()

Posted 2020-10-25 smy225

网页中用到克隆的地方有很多，例如页面滚动到底部时内容动态加载，都可以用克隆来实现。

克隆时一般先把模板单独放出来，并给样式设置为display:none，用jQuery的clone()实现

 1         <div class="panel panel-default clone-box">
 2             <div class="panel-heading">
 3                 <a href="javascript:;" class="flex">
 4                     <div class="panel-title">
 5                         <span></span>
 6                         <img src="img/work2.jpg" class="work1">
 7                     </div>
 8                 </a>
 9             </div>
10             <div class="panel-collapse collapse">
11                 <div class="panel-body">
12                     <p>今日已完成</p>
13                     <p class="finish-detail"></p>
14                     <p>困难或总结</p>
15                     <p class="summary">无，如果有可以写！</p>
16                 </div>
17             </div>
18         </div>

1 .cone-box{
2     display:none;
3 }

接下来就是重头戏，jQuery的clone()方法：

1 var clone = $(".clone-box").clone(true);
2 clone.removeClass("clone-box");
3 $(this).attr("data-dismiss", "modal");                                        
4 $(‘.weekbao .panel-group‘).prepend(clone);

clone()方法里的true代表克隆的时候连事件也一起克隆。