aktualisieren geklonte Element automatisch auf Urelement Update -JQuery

Question

Lets unten Szenario vor:

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

Jetzt mit JQuery:

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

Jetzt werde ich als

einige Änderungen an meinem ursprünglichen Element tun

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

Wenn ich $vdom.find('p').text() ausführt, gibt es immer noch "etwas Text". Wie aktualisiert man das geklonte Element automatisch entsprechend den Änderungen, die mit dem ursprünglichen Element vorgenommen wurden?

$vdom.find('p').text("changed text"), ist für diesen Kontext in Ordnung, aber ich möchte dies automatisieren, wo jede Änderung an Originalelement sollte in geklonten Element bestehen bleiben.

Gibt es eine Bibliothek, um dies zu erreichen?

Answer 1

Sie haben das clonned Element in den Körper, um es auf den DOM-Stack zu haben, einfügen und dann kann es mit einem globalen Selektor wie folgt ändern:

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

Führen Sie dieses Snippet und prüfen Sie beiden Texte und die Konsole Ausgabeergebnis:

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>