小道具でjquery DOMオブジェクトを複製することは可能ですか？

Question

私は次の行動にしようとしている：

• はvar domObj = $("<div>").prop("foo", "bar");
• クローン作成されたオブジェクトvar clonedDomObj = domObj.clone(true);
• それに割り当てプロップ
jQueryの $("<div>")を経由してDOMオブジェクトを作成するには、 clonedDomObj.prop("foo") は、コードペンを参照してくださいクローン化されたオブジェクトから小道具を読みます example

私が.prop("foo")からclonedDomObjを受け取ると、私は受け取ったundefined

質問：どのように小道具でjQuery DOMオブジェクトを複製することは可能ですか？

Answer 1

オブジェクトと配列がコピーされていないと クローン化要素と元 素子との間で共有され続けます。ディープコピーにすべてのデータ、コピー手動それぞれ：jQueryの1.4のよう

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>

、全ての要素データ（.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

これが私が見つけた唯一の方法です。要素データ内

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

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