jquery 复制新增Dom对象

做一个招聘的项目,填写教育经历、工作经历时,需要复制多项:

点击加号,将上面默认表格项复制一份,插入加号之前:

var i=1; //全局变量,控制增加项的ID号递增,且便于删除按钮按ID号删除
function addItemTest(){
i++;
alert(i);
$(".info_1").clone().insertBefore("#itemAdd").removeClass("info_1").addClass("info_"+i);//这一步是关键,$(".info_1").clone()表示复制的新对象,之后的insertBefore、removeClass和addClass都可针对这个对象同步进行。
var strDel="<div id="itemDelete_"+i+"" class="sep"><a><img src="${base}/resources/shop/images/delete.png" onclick="deleteItemTest("+i+")" /></a></div>";
$(".info_"+i+" div:first-child").html(strDel);
//strDel.insertBefore("#itemAdd");  //这一行不起作用,因为字符串不是Dom对象,不能执行insertBefore这种操作。暂行解决办法是在默认项里放一个空的div,用来填充删除代码。
}
function deleteItemTest(num){
$(".info_"+i).remove();
}

代码解析:

$(".info_1").clone().insertBefore("#itemAdd").removeClass("info_1").addClass("info_"+i);

关键点:

1.clone([Even[,deepEven]]) 

Events[,deepEvents]Boolean,BooleanV1.5

1:一个布尔值(true 或者 false)指示事件处理函数是否会被复制。V1.5以上版本默认值是:false

2:一个布尔值,指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。貌似子元素的数据是默认复制的。

2.insertBefore

在jQuery 1.3.2中,appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,返回值是所有被追加的内容,而不仅仅是先前所选中的元素。所以,要选择先前选中的元素,需要使用end()方法。如:

$("<p/>")
   .appendTo("div")
   .addClass("test")
   .end()
   .addClass("test2");

3.一句代码执行多个操作,即多个操作平行执行,这是我之前没有想过还可以这样的。

既然insertBefore仍是选中的复制的新元素,那么还可以接着再执行其他所有需要对刚复制的元素进行的操作。复制后的新项往往需要改变id号或name之类的操作,以与母体相区别,而如何选中新项曾是一个非常困扰我的问题,因为复制项与母体一模一样,无法选择。而这种所有操作一步执行的方式就可使这个问题迎刃而解了。

原文地址:https://www.cnblogs.com/wildorchid/p/4627443.html