私は、このようなHTMLコードを持っているタグスクリプト

Question

でHTMLブロックをコピーします。結果：

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

idタグスクリプト内のidを変更したいと思います。 $("#1-text").val('other value'); どうすればいいですか？

Answer 1

変数を外側に追加するだけで、何を選択するかが動的に示されます。あなたはこのような何かを行うことができますループを使用して、値を反復処理した場合そう：

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

をあなたはまた、カウンタを設定し、新しいdivのようでした私増分を追加しています。それは柔軟です。

あなたの最終目標は正確にはわかりませんが、<script>タグでjavascriptを操作しようとしている場合は、この方法論をお勧めしません。私はそれが厄介であると信じている。

Answer 2

HTMLブロック全体をコピーする場合は、インラインJavaScriptコードをこのブロックにコンテナとしてバインドする必要があります。 idではない。したがって、ブロックを移動またはコピーすると、スクリプトはコンテナに関連する要素をすべて見つけることができます。

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

ここで、id以外のクラスで要素にアクセスできます。 "js-"接頭辞を使用する注は、CSSスタイルではなくJavaScriptの操作用です。

また、スクリプト自体を変更する必要はありません。値は"data-"属性で変更できます。

外部スクリプトでは、さまざまな方法で任意のクローンロジックをカプセル化できます。例：

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'); 

the working exampleを参照してください。