나는 같은 HTML 코드를 태그 스크립트

Question

와 HTML 블록을 복사합니다. 결과 :

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

태그 내부 스크립트 ID를 변경하고 싶습니다. $("#1-text").val('other value'); 어떻게해야합니까?

Answer 1

외부 선택 변수를 선택하면 무엇을 선택할지 쉽게 알 수 있습니다. 당신은 루프를 사용하여 값을 반복한다면 그래서 당신은 같은 것을 할 수 있습니다

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

또한 카운터를 설정할 수 있습니다와 같은 새로운 div의이 내가 단위를 추가됩니다. 그래서 유연합니다.

최종 목표는 정확히 모르겠지만 <script> 태그에서 javascript를 조작하려는 경우이 방법론을 권장하지 않습니다. 나는 그것이 성가신 것이라고 믿는다.

Answer 2

전체 HTML 블록을 복사하려면이 블록에 인라인 자바 스크립트 코드를 컨테이너로 바인딩해야합니다. 이드는 아니야. 따라서 블록을 이동하거나 복사 할 때 스크립트는 컨테이너와 관련된 요소를 찾을 수 있습니다.

<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을 볼 수 있습니다.