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>

下面进入正题：

显示结果如下：

现在我们想通过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”);
})

最终显示效果：

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道！