Question

请有人告诉我为什么output#1和output#2有区别？我将t作为全局变量并将一个js脚本行t=$('table#t tr:eq(0)').clone();放在click函数之外，然后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'，那么它只会移动它，因为DOM元素不能同时位于2个位置。这就是克隆必须在循环内的原因。

然而，每次将它附加到某个地方时，你的g变量都会用来创建一个新的dom元素。

请参阅此快速小提示来证明这一点:) https://github.com/tuxmobil/CampFahrplan/pull/148

<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);

jQuery clone（）打印一次

1 个答案: