1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
<!DOCTYPE html>
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
<div class="entry-content">
<div class="entry-title roundTop">
<h1 class="jq-clearfix">.clone()</h1>
<div class="entry-meta jq-clearfix">
Categories:
<span class="category"><a href="http://api.jquery.com/category/manipulation/" title="View all posts in Manipulation">Manipulation</a> > <a href="http://api.jquery.com/category/manipulation/copying/" title="View all posts in Copying">Copying</a></span>
</div>
</div>
<div id="clone1" class="entry method">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">.clone( [withDataAndEvents] )</span> <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
</h2>
<div class="jq-box roundBottom entry-details">
<p class="desc"><strong>Description: </strong>Create a deep copy of the set of matched elements.</p>
<ul class="signatures">
<li class="signature" id="clone-withDataAndEvents">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.clone( [withDataAndEvents] )</h4>
<p class="arguement"><strong>withDataAndEvents</strong>A Boolean indicating whether event handlers should be copied along with the elements. As of jQuery 1.4, element data will be copied as well.</p>
</li>
<li class="signature" id="clone-withDataAndEvents-deepWithDataAndEvents">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.5/">1.5</a></span>.clone( [withDataAndEvents] [, deepWithDataAndEvents] )</h4>
<p class="arguement"><strong>withDataAndEvents</strong>A Boolean indicating whether event handlers and data should be copied along with the elements. The default value is <code>false</code>. <em>*In jQuery 1.5.0 the default value was incorrectly <code>true</code>; it was changed back to <code>false</code> in 1.5.1 and up.</em></p>
<p class="arguement"><strong>deepWithDataAndEvents</strong>A Boolean indicating whether event handlers and data for all children of the cloned element should be copied. By default its value matches the first argument's value (which defaults to <code>false</code>).</p>
</li>
</ul>
<div class="longdesc">
<p>The <code>.clone()</code> method performs a <em>deep</em> copy of the set of matched elements, meaning that it copies the matched elements as well as all of their descendant elements and text nodes. When used in conjunction with one of the insertion methods, <code>.clone()</code> is a convenient way to duplicate elements on a page. Consider the following HTML:</p>
<pre><div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div></pre>
<p>As shown in the discussion for <code><a href="http://api.jquery.com/append/">.append()</a></code>, normally when an element is inserted somewhere in the DOM, it is moved from its old location. So, given the code:</p>
<pre>$('.hello').appendTo('.goodbye');</pre>
<p>The resulting DOM structure would be:</p>
<pre><div class="container">
<div class="goodbye">
Goodbye
<div class="hello">Hello</div>
</div>
</div></pre>
<p>To prevent this and instead create a copy of the element, you could write the following:</p>
<pre>$('.hello').clone().appendTo('.goodbye');</pre>
<p>This would produce:</p>
<pre><div class="container">
<div class="hello">Hello</div>
<div class="goodbye">
Goodbye
<div class="hello">Hello</div>
</div>
</div></pre>
<blockquote><p>Note that when using the <code>.clone()</code> method, you can modify the cloned elements or their contents before (re-)inserting them into the document.</p></blockquote>
<p>Normally, any event handlers bound to the original element are <em>not</em> copied to the clone. The optional <code>withDataAndEvents</code> parameter allows us to change this behavior, and to instead make copies of all of the event handlers as well, bound to the new copy of the element. As of jQuery 1.4, all element data (attached by the <code>.data()</code> method) is also copied to the new copy. </p>
<p>However, objects and arrays within element data are not copied and will continue to be shared between the cloned element and the original element. To deep copy all data, copy each one manually:</p>
<pre>var $elem = $('#elem').data( "arr": [ 1 ] ), // Original element with attached data
$clone = $elem.clone( true )
.data( "arr", $.extend( [], $elem.data("arr") ) ); // Deep copy to prevent data sharing
</pre>
<p>As of jQuery 1.5, <code>withDataAndEvents</code> can be optionally enhanced with <code>deepWithDataAndEvents </code> to copy the events and data for all children of the cloned element.</p>
</div>
<h3>Examples:</h3>
<div class="entry-examples" id="entry-examples">
<div id="example-0">
<h4>Example: <span class="desc">Clones all b elements (and selects the clones) and prepends them to all paragraphs.</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<b>Hello</b><p>, how are you?</p>
<script>
$("b").clone().prependTo("p");
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div id="example-1">
<h4>Example: <span class="desc">When using .clone() to clone a collection of elements that are not attached to the DOM, their order when inserted into the DOM is not guaranteed. However, it may be possible to preserve sort order with a workaround, as demonstrated:</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<style>
#orig, #copy, #copy-correct {
float: left;
width: 20%;
}
</style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<div id="orig">
<div class="elem"><a>1</a></div>
<div class="elem"><a>2</a></div>
<div class="elem"><a>3</a></div>
<div class="elem"><a>4</a></div>
<div class="elem"><a>5</a></div>
</div>
<div id="copy"></div>
<div id="copy-correct"></div>
<script>
// sort order is not guaranteed here and may vary with browser
$('#copy').append($('#orig .elem')
.clone()
.children('a')
.prepend('foo - ')
.parent()
.clone());
// correct way to approach where order is maintained
$('#copy-correct')
.append($('#orig .elem')
.clone()
.children('a')
.prepend('bar - ')
.end());
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
</div>
</div>
</div>
</div>
</body></html>
|
