Question

我正在尝试下一步行为：

通过jQuery $("<div>")
为其指定道具var domObj = $("<div>").prop("foo", "bar");
克隆创建的对象var clonedDomObj = domObj.clone(true);
从克隆对象clonedDomObj.prop("foo")读取道具请参阅代码笔example

问题是，当我从.prop("foo")阅读clonedDomObj时，我收到undefined

问题是：是否有可能以某种方式用道具克隆jQuery DOM对象？

Answer 1

元素数据中的对象和数组不会被复制继续在克隆元素和原始元素之间共享元件。要深层复制所有数据，手动复制每个数据：

var domObj = $("<div class='text'>").prop("foo", "bar");
$("#p1").text(domObj.prop("foo"));

var clonedDomObj = domObj.clone(true).prop("foo",domObj.prop("foo"));
$("#p2").text(clonedDomObj.prop("foo"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Original Value: </span><span id="p1"></span>
<br/>
<span>Cloned Value:   </span><span id="p2"></span>

从jQuery 1.4开始，所有元素数据（由.data（）方法附加）也会复制到新副本。

var domObj = $("<div class='text'>").data("foo", "bar");
$("#p1").text(domObj.data("foo"));
var clonedDomObj = domObj.clone(true);
$("#p2").text(clonedDomObj.data("foo"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Original Value: </span><span id="p1"></span>
<br/>
<span>Cloned Value:   </span><span id="p2"></span>

Answer 2

这是我找到的唯一方法。

＆＃13;

   var domObj = $("<div>").prop("foo", "bar");
    $("#p1").text(domObj.prop("foo"));
    
    var clonedDomObj = $("#p1").clone(true);
    $("#p2").text(clonedDomObj.html());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Original Value: </span><span id="p1"></span>
<br/>
<span>Cloned Value:   </span><span id="p2"></span>

＆＃13;

是否可以使用props克隆jquery DOM对象？

2 个答案: