如何创建.clone()jquery对象的副本

piok6c0g 于 2022-12-26 发布在 jQuery

关注(0)|答案(2)|浏览(130)

我尝试重用/存储一个带有所有复选框的元素，但是在使用jquery的. clone（）时遇到了问题。

$('.test1').on('change', ':input', function() {
  $temp = $(".test1").clone()[0];
  $('#test2').html($temp);
  $('#test3').html($temp);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="test1">
  <input type="checkbox" checked> a<br/>
  <input type="checkbox" checked> b<br/>
</div>

<div>Test 2</div>
<div id="test2"></div>

<div>Test 3</div>
<div id="test3"></div>

当我对.test1进行更改时，它应该将其保存到变量中，然后将该变量插入到test2和test3中，但在将其插入到test2中后，它会将其从那里删除，并只将其插入到test3中。
有没有一种变通办法或更好的方法来实现这一点，同时也存储状态？

jquery

来源：https://stackoverflow.com/questions/74911749/how-to-create-a-copy-of-a-clone-jquery-object

2条答案

按热度按时间

olhwl3o21#

您遇到的问题很可能是由于您使用克隆的元素替换#test2的内容，然后使用相同的元素替换#test3的内容，从而将其从#test2中删除。您可以通过调用.clone（）来执行此操作

$('.test1').on('change', ':input', function() {
  var $temp = $(".test1").clone();
  $('#test2').html($temp.clone());
  $('#test3').html($temp.clone());
});

赞(0）回复(0）举报 2022-12-26

zed5wv102#

不幸的是，jQuery在这里欺骗了您。在html函数内部，有一个检查来查看传递的值是否是字符串。在本例中，它不是字符串。克隆的[0]实际上是一个元素。
您可以使用jQuery自己的检查来再次检查：

console.log(typeof $temp === "string"); //false

因此，使用了以下代码：

this.empty().append( value ); // where value is $temp

这意味着对.html($temp)的第一次调用追加了元素，第二次调用也追加了元素，但是在本例中是同一个元素，因此它被移到了最后一次调用。
如果你想保留状态，你需要每次插入一个克隆。插入元素的html将不会保留它的选中或未选中状态。
一个二个一个一个

赞(0）回复(0）举报 2022-12-26

我来回答

如何创建.clone()jquery对象的副本

2条答案

相关问题

热门标签

最新问答