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之類的操作,以與母體相區別,而如何選中新項曾是一個非常困擾我的問題,因為復制項與母體一模一樣,無法選擇。而這種所有操作一步執行的方式就可使這個問題迎刃而解了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM