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()方法)

jquery之设置元素内容(克隆元素,使用clone()方法)
  • fhd001
  • fhd001
  • 2011年04月08日 20:17
  • 3481

jquery clone()函数讲解

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

jquery复制数组

方法一:

js克隆对象、数组的常用方法【clone】

Ext的两种克隆的方法: 可以克隆对象、数据等:var newJson = Ext.clone(json); 只能克隆数组:var newJson = Ext.Array.clone(json);  ...

jQuery中json对象的复制(数组及对象)

1、jQuery自带的$.map方式: $.map(json, function (n) { return n; }); 这种方式原来用于复制数组还可以,今天用它复制数组中的某一条记录,发现字段名称丢...

jquery animate妙用

jquery中需要自定义动画时需要animate函数,但animate() 方法执行的是 CSS 属性集的自定义动画,比如 div.animate({width:300},1000);第一个参数必须是...
  • duwen90
  • duwen90
  • 2016年01月24日 11:13
  • 788

关于跨域访问json数据的一个笨方法的实践

一、跨域访问的思路 jsonp与ajax虽是两个不同的概念,但jquery的$.ajax实现了jsonp的跨域访问。此方法的跨域访问数据需依赖要被访问的服务端脚步能根据jsonp:'jsoncal...

tomcat 下配置ajax 跨域 访问

CORS介绍    它在维基百科上的定义是:跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源。而这种访问是被同源策略所禁止的。COR...

jquery.clone.js

  • 2017年08月10日 15:07
  • 931B
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery中的clone妙用
举报原因:
原因补充:

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