更新克隆元素-JQuery

Question

讓我們考慮下面的情形：

<div class="org"> <p>Some text</p> </div> 

現在使用JQuery：

$vdom = $(".org").clone(); 

現在，我會做一些改變我原來的元素

$(".org p ").text("Changed text");  

如果我執行$vdom.find('p').text()它仍然給「一些文本」。如何根據原始元素髮生的變化自動更新克隆元素。

$vdom.find('p').text("changed text")，對於這種情況很好，但是我想自動化這個，原始元素的每一個變化都應該保留在克隆元素中。

是否有任何圖書館來實現這一點。

Answer 1

你必須在clonned元素插入到體內，以它具有對DOM堆棧，然後它可以用一個全球性的選擇這樣的改變：

$(".org p ").text("Changed text"); 

運行這段代碼，並檢查兩種文本和控制檯輸出結果：

var $vdom; 
 
    $('#cloneEl').on('click', function() { 
 
    $vdom = $(".org").clone(); 
 
    $('body').append($vdom); 
 
}); 
 

 
$('#changeText').on('click', function() { 
 
    $(".org p ").text("Changed text"); 
 
    console.log($vdom.find('p').text()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="cloneEl">Clone org</button> 
 
<button id="changeText">Change org text</button> 
 

 
<div class="org"> <p>Some text</p> </div>