kopieren HTML-Block mit Tags script

Question

ich eine solche HTML-Code haben:

<div> 
    <div id="text">text></div> 
    <script>$("#text").val('some value');</script> 
</div> 

ich kopieren Sie diesen HTML durch .clone() und bearbeiten html innen. Ergebnis:

<div> 
    <div id="1-text">text></div> 
    <script>$("#text").val('some value');</script> 
</div> 

Ich möchte ID innerhalb Tags Skript ändern. $("#1-text").val('other value'); Wie kann ich es tun?

Answer 1

Sie können einfach eine Variable hinzufügen, die dynamisch angibt, was ausgewählt werden soll. also, wenn Sie durch Ihre Werte zu durchlaufen waren eine Schleife verwenden, können Sie etwas tun:

$("#text_"+i).val('other value'); 

Sie könnten auch einen Zähler gesetzt und als neue divs sind die i-Schritten zugegeben. Es ist also flexibel.

Ich bin nicht genau sicher, was Ihr Endziel ist, aber ich würde diese Methode nicht empfehlen, wenn Sie versuchen, das Javascript im <script> Tag zu manipulieren. Wie ich glaube, wäre das umständlich.

Answer 2

Wenn Sie den gesamten HTML-Block kopieren möchten, sollten Sie Ihren Inline-JavaScript-Code als Container an diesen Block binden. Nicht ID. Wenn Sie also den Block verschieben oder kopieren, kann Ihr Skript alle mit container verbundenen Elemente finden.

<div id="containerOne" class="js-container"> 
    <div class="js-text" data-text="some value">some value</div> 
    <script> 
     var $el = $("script").last().closest(".js-container").find(".js-text"); 
     $el.text($el.data("text")); 
    </script> 
</div> 

Hiermit erhalten Sie Zugriff auf Elemente nach Klasse nicht ID. Hinweis mit "js" Präfix ist nur für Javascript-Manipulation nicht für CSS-Styling.

Auch Sie müssen das Skript nicht selbst ändern. Sie können die Werte über "data-" Attribute ändern.

In Ihrem externen Skript können Sie jede Klonlogik mit verschiedenen Methoden kapseln. Zum Beispiel:

var myModule = { 
    clone: function(containerSelector) { 
    var $donorEl = $(containerSelector); 
    var $donorScript = $donorEl.find('script'); 
    $script = $("<script />"); 
    $script.text($donorScript.text()); 
    $recipientEl = $donorEl.clone(); 
    $recipientEl.attr('id', 'containerTwo'); 
    var newValue = 'other value'; 
    $('.js-text', $recipientEl).data('text', newValue); 
    $('body').append($recipientEl); 
    $('script', $recipientEl).replaceWith($script); 
    } 
}; 

myModule.clone('#containerOne'); 

Sie können the working example sehen.