.clone()
.clone( [ withDataAndEvents ] ) 返回: jQuery
描述:深度復制匹配的元素。
-
version added: 1.0.clone( [ withDataAndEvents ] )
withDataAndEvents一個Boolean值(true 或者 false)指示事件處理函數(shù)是否會被復制。對已jQuery 1.4,元素數(shù)據(jù)也會被復制。
-
version added: 1.5.clone( [ withDataAndEvents ], [ deepWithDataAndEvents ] )
withDataAndEvents一個Boolean值(true 或者 false)指示事件處理函數(shù)是否會被復制。對已jQuery 1.4,元素數(shù)據(jù)也會被復制。 默認值是
false。*對于1.5.0的默認值是不正確true。這將在1.5.1以上改回false。deepWithDataAndEvents一個布爾值,指示是否對事件處理程序和克隆的元素的所有子元素的數(shù)據(jù)應該被復制。默認情況下它的值相匹配的第一個參數(shù)的值( 默認值是
false)
.clone()方法深度復制所有匹配的元素,包括所有匹配元素、匹配元素的下級元素、文字節(jié)點。
當和插入方法聯(lián)合使用時,.clone()對于復制頁面上的元素很方便。請看下面的HTML:
<div class="container"> <div class="hello">Hello</div> <div class="goodbye">Goodbye</div> </div>
像我們討論.append()一樣,通常我們將頁面上一個元素插入到DOM里另立個地方,它會被從老地方移走:
$('.hello').appendTo('.goodbye');
得到的DOM結(jié)構(gòu)如下:
<div class="container">
<div class="goodbye">
Goodbye
<div class="hello">Hello</div>
</div>
</div>
但是我們?nèi)绻枰氖菑椭贫皇且瞥?,我們可以像下面這樣寫代碼:
$('.hello').clone().appendTo('.goodbye');
結(jié)果會是:
<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">
Goodbye
<div class="hello">Hello</div>
</div>
</div>
當我們用
.clone()方法時,我們可以修改被復制的元素或者元素內(nèi)容,在將它插入到文檔之前。
通常,任何綁定綁定在原始元素上的事件處理函數(shù)都不會被復制到克隆元素??蛇x的withDataAndEvents 參數(shù)允許我們改變該行為,
從而將所有綁定在原始元素上的事件處理函數(shù)復制到克隆元素上。對于jQuery 1.4,所有元素數(shù)據(jù)( .data()方法返回的內(nèi)容)同樣被復制到新的克隆元素。
在jQuery 1.5,withDataAndEvents可以選擇性增強deepWithDataAndEvents復制元素的事件和數(shù)據(jù)的克隆的所有子元素。
Example:
復制所有 b 元素然后將他們插入到所有段落里面的前面。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<b>Hello</b><p>, how are you?</p>
<script>
$("b").clone().prependTo("p");
</script>
</body>
</html>