jQuery clone() 打印一次

Question

请有人告诉我为什么 output#1和output#2有区别吗？我已经拿了t作为全局变量并放置一个 js 脚本行 t=$('table#t tr:eq(0)').clone();在点击功能之外然后 table-row它不会打印超过一份。至于var g='text-add-<br/>';在哪里它正在附加多个。

HTML:

<table id='t'>
<tr><td>1</td><td>2</td></tr>
</table>
<br/>
<br/>
<a href='javascript:void' id='r'>+Row</a>
<br/>
<br/>
<b> Text is adding...</b>
<br/>
<div id='d'></div>

脚本#1

$(document).ready(function(){
var t;
var g='text-add-<br/>';
$('a#r').click(function(){
t=$('table#t tr:eq(0)').clone();
$('table#t >tbody').append(t.find('td').text('table-row').end());
$('#d').append(g);
});
});

输出#1(单击+行):

1   2
table-row   table-row
table-row   table-row
table-row   table-row

+Row

Text is adding...
text-add-
text-add-
text-add-

这是working demo for jsfiddle#1 。

脚本#2:

$(document).ready(function(){
var t;
var g='text-add-<br/>';
t=$('table#t tr:eq(0)').clone();
$('a#r').click(function(){
$('table#t >tbody').append(t.find('td').text('table-row').end());
$('#d').append(g);
});
});

输出#2(单击+行):

1   2
table-row   table-row


+Row

Text is adding...
text-add-
text-add-
text-add-

这是working demo for jsfiddle#2 。

Answer 1

t 是对使用 $(..) 选择的 dom 元素的引用。

g 是您创建的字符串元素。

如果每次想将“t”附加到某处时不克隆“t”，它只会移动它，因为 DOM 元素不能同时位于两个位置。这就是克隆必须位于循环内部的原因。

然而，每次将 g 变量附加到某处时，都会使用它来创建新的 dom 元素。

看看这个快速 fiddle 来证明这一点:) Fiddle

<p id="p1">Unicorns do exist</p>
<div id="div1">There's nothing in here</div>
<div id="div2">Neither</div>

<小时/>

setTimeout(function() {
    $('#div1').append( $('#p1') ); //p is moved
}, 3000);
setTimeout(function() {
    $('#div2').append( $('#p1').clone() ); //p is copied
}, 5000);