Question

我有这样的HTML代码：

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

我通过.clone()复制这个html并在里面编辑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');

你也可以设置一个计数器，并且当i增量添加新的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访问元素。注意使用＆＃34; js - ＆＃34; 前缀仅适用于javascript操作而不适用于CSS样式。

此外，您不需要更改脚本本身。您可以通过＆＃34;数据 - ＆＃34; 属性更改值。

在外部脚本中，您可以通过各种方法封装任何克隆逻辑。例如：

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。

用标签脚本复制html块

2 个答案: