jQuery的clone(克隆)方法可以幫助我們在DOM元素中復(fù)制一個元素。clone方法的語法如下:
$(selector).clone(deepWithDataAndEvents)
其中,第一個參數(shù)表示需要克隆的DOM元素的選擇器;第二個參數(shù)表示是否克隆元素的數(shù)據(jù)和事件。
如果想要多次克隆同一個元素,我們可以寫一個循環(huán)來實(shí)現(xiàn):
for(var i=0; i<10; i++) { var clonedElement = $(selector).clone(); $('body').append(clonedElement); }
上面的代碼會克隆選擇器選擇的元素10次,并將克隆出來的元素追加到body標(biāo)簽內(nèi)。這樣就可以實(shí)現(xiàn)在頁面上復(fù)制多個元素的效果了。
然而,如果我們要對克隆出來的元素進(jìn)行修改,就需要注意一個問題:我們不能簡單地使用相同的ID,因?yàn)镮D在HTML文檔中應(yīng)該是唯一的。為了避免這個問題,我們可以在克隆出來的元素中修改ID:
for(var i=0; i<10; i++) { var clonedElement = $(selector).clone(); clonedElement.attr('id', 'new-id-'+i); $('body').append(clonedElement); }
上面的代碼會在每個克隆出來的元素中添加一個帶有不同數(shù)字的新ID。這樣就能避免ID重復(fù)的問題了。
另外,如果我們不只是想要復(fù)制元素本身,還想要將元素內(nèi)的數(shù)據(jù)一并復(fù)制過來,可以使用clone方法的第二個參數(shù)。如果傳入true,就可以克隆出來元素及其內(nèi)部的數(shù)據(jù)和事件:
for(var i=0; i<10; i++) { var clonedElement = $(selector).clone(true); clonedElement.attr('id', 'new-id-'+i); $('body').append(clonedElement); }
上面的代碼會克隆出來元素及其內(nèi)部的數(shù)據(jù)和事件,并且為每個克隆出來的元素添加一個帶有不同數(shù)字的新ID。