jQuery中的clone妙用

转载 2017年01月03日 09:16:35

clone:官方的解释是克隆匹配的DOM元素并且选中这些克隆的副本。如果想克隆DOM元素绑定的所有事件,可采用clone(true),JQ1.5版本以上默认为false。

具体怎么用?

先举例一个小例子:

<p><a href="#">第一个<a/>123456</p>

我们想吧a标签克隆一个放在p标签内部末尾:

$("a").clone().appendTo("p")

结果:<p><a href="#">第一个</a>123456<a href="#">第一个</a></p>

下面进入正题:

jQuery中的clone妙用

显示结果如下:

jQuery中的clone妙用

现在我们想通过jq向这表格中添加数据,这时候克隆就是一个很好的办法了。

第一步:

创建数据源:

var data = [

{id:1,name:"张三",sex:"男",age:"16",score:80},

{id:1,name:"李四",sex:"男",age:"22",score:70},

{id:1,name:"赵五",sex:"男",age:"25",score:90}

];

第二步:通过each遍历数据源

$.each(data,function(i,o){

})

其中i表示索引值,o表示对应的数据源数组里面的元素

第三步:clone方法的运用

var $myTable = $(".myTable");

$.each(data,function(i,o){

var $clone = $(".template").clone().show().removeClass("template");

$clone.find("first:td").text(o.id).next().text(o.name).next().text(o.sex).next().text(o.age).next().text(o.score);

})

首先将最开始设置的那个模板进行克隆并且显示,移除出类名。然后依次找到它下面的第一个td,第二个td……内容进行赋值。

第四步:添加到DOM树上

var $myTable = $(".myTable");

$.each(data,function(i,o){

var $clone = $(".template").clone().show().removeClass("template");

$clone.find("td:first").text(o.id).next().text(o.name).next().

text(o.sex).next().text(o.age).next().text(o.score);

/*添加到表格中*/

$clone.appendTo(".myTable");

})

最终显示效果:

jQuery中的clone妙用

本文为头条号作者发布,不代表今日头条立场。

jquery clone 与 clone(true) 的区别

本文转自:http://blog.baiwand.com/?post=27
  • sinolzeng
  • sinolzeng
  • 2014年09月22日 09:12
  • 6638

jquery clone()函数讲解

Jqueryclone()实例 Jquery clone() 函数被用来创建匹配元素的一份拷贝。其也支持比尔参数用来指示是否拷贝匹配元素的数据和事件处理器。   1 拷贝html 元素   ...
  • taiyb
  • taiyb
  • 2014年11月24日 23:12
  • 1179

Jquery clone方法笔记

菜鸟教程(runoob.com) $(document).ready(function(){ $("button").click(function(){ $("body").append(...
  • zhuyingya
  • zhuyingya
  • 2017年01月12日 11:12
  • 156

jQuery 文档操作 - clone() 方法

clone( [withDataAndEvents ] ):创建一组匹配元素的深层副本 withDataAndEvents :一个布尔值,指示是否应复制克隆元素的所有子代的事件处理程序和数据。默认情...
  • qq_35864642
  • qq_35864642
  • 2017年09月12日 10:44
  • 160

jQuery 克隆对象的简单示例

简单例子  代码如下 复制代码 // 浅层复制(只复制顶层的非 object 元素)  var newObject = jQuery.extend({}, oldOb...
  • luyaran
  • luyaran
  • 2016年11月14日 16:02
  • 2128

JQ,clone()方法

实践题 - 选项卡       $(function(){   $("li").click(function(){   alert($(this).text());   })   $...
  • sunling112
  • sunling112
  • 2016年11月04日 10:38
  • 624

jquery.clone.js

  • 2017年08月10日 15:07
  • 931B
  • 下载

JS实现Clone

js 克隆 镜像
  • li_star
  • li_star
  • 2016年06月23日 11:36
  • 942

【jQuery】使用jQuery的clone()方法来克隆元素时,如何保持id的唯一性

大家都知道,同一个HTML页面中,不宜出现1个以上相同名称的id。但有时候需要使用jQuery框架的clone()来复制相同内容(附带样式),假如是使用了id号的获取方式,即$(‘#***’) 那么复...
  • LZGS_4
  • LZGS_4
  • 2015年01月27日 23:26
  • 7782

jquery的clone方法应用于textarea和select时,value值丢失

textarea和select的值clone的时候会丢掉,在clone的时候将val再重新赋值一下就可以了. 测试发现,textarea和select的jquery的clone方法有问题,text...
  • qianqianyixiao1
  • qianqianyixiao1
  • 2016年08月26日 14:22
  • 928
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery中的clone妙用
举报原因:
原因补充:

(最多只允许输入30个字)