Question

我正在尝试克隆一个如下所示的 div：

<div id="multipleSteps">
    <div id="step_1">
        <input type="text" name="step_name_1" id="step_name_1">
    </div>
</div>

一个简单的克隆有效，但我不知道如何克隆它并将“_1”替换为“_2”。

这是我尝试过但不起作用的方法：

var newStep = $( "#step_1" );
newStep = text.replace("_1", "_2");
newStep.prependTo( "#multipleSteps" );

Answer 1

使用此代码动态设置您的 id 步骤“step_1”计数器。

var newStep = $( "#step_1" ).prop('outerHTML');
count = $('#multipleSteps').length;
newStep = newStep.replace("_1", "_"+(count+1));
$(newStep).appendTo("#multipleSteps");

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="multipleSteps">
    <div id="step_1">
        <input type="text" name="step_name_1" id="step_name_1">
    </div>
</div>

Answer 2

首先您需要将 step_1 的 html 作为文本获取，然后将 "_1" 替换为 "_2"，然后将新的 html 附加到 multipleSteps div :

var html = $("#step_1").prop('outerHTML').replace(/_1/g, '_2')
var newStep = $(html);
newStep.appendTo("#multipleSteps");

prop('outerHTML') 用于获取包含它自己的元素的 html

replace(/_1/g, '_2') 用于替换所有的 "_1"

https://jsfiddle.net/ao92wrtz/

带有替换值的 jQuery 克隆 div

2 个答案: