Javascript 如何在更改属性值的同时克隆大量HTML

我有一组输入，每当单击按钮时，需要在HTML中重复这些输入。我目前有一个方法，可以将HTML插入DOM，但恐怕这不是一个非常可维护的解决方案

目前，我有一组输入定义为-

<div class="input-row">
    <input name="location-0-bol-0-name" id="location-0-bol-0-name" class="form-control">
    <input name="location-0-bol-0-description" id="location-0-bol-0-description" class="form-control">
    <input name="location-0-bol-0-weight" id="location-0-bol-0-weight" class="form-control">
    <input name="location-0-bol-0-type" id="location-0-bol-0-type" class="form-control">
</div>

单击一个按钮，我想复制元素和嵌套在其中的所有输入。但是，我需要通过将第二个数值增加1来更新所有输入的name和id属性。例如，下一组输入如下-

<div class="input-row">
    <input name="location-0-bol-1-name" id="location-0-bol-1-name" class="form-control">
    <input name="location-0-bol-1-description" id="location-1-bol-0-description" class="form-control">
    <input name="location-0-bol-1-weight" id="location-0-bol-1-weight" class="form-control">
    <input name="location-0-bol-1-type" id="location-0-bol-1-type" class="form-control">
</div>

我想我可以使用JQuery提供的clone（）函数，但我不确定如何迭代所有元素并正确更新属性。有人能提供一些指导吗

谢谢

提供所需的迭代。它返回元素的深度副本，其中也包括子元素

var clone = $(".input-row").clone();

这将返回元素的克隆，包括其中的所有可重用项（子项）。

您可以克隆行，然后遍历子行，为每个子行创建id和名称

一种方法，而不是使用正则表达式，是将输入的“类型”存储在每个子级的数据中，因此

id=“location-0-bol-1-name”

等的

data type=“name”

<button>Clone</button>
<div class="input-row">
    <input name="location-0-bol-1-name" id="location-0-bol-1-name" class="form-control" data-type="name" />
    <input name="location-0-bol-1-description" id="location-1-bol-0-description" class="form-control" data-type="description" />
    <input name="location-0-bol-1-weight" id="location-0-bol-1-weight" class="form-control" data-type="weight" />
    <input name="location-0-bol-1-type" id="location-0-bol-1-type" class="form-control" data-type="type" />
</div>

---

您可以制作要插入内容的模板，如下所示：

<div id="input-row-template" style="display: none;">
    <div class="input-row">
        <input name="location-0-bol-__INDX__-name" id="location-0-bol-__INDX__-name" class="form-control">
        <input name="location-0-bol-__INDX__-description" id="location-0-bol-__INDX__-description" class="form-control">
        <input name="location-0-bol-__INDX__-weight" id="location-0-bol-__INDX__-weight" class="form-control">
        <input name="location-0-bol-__INDX__-type" id="location-0-bol-__INDX__-type" class="form-control">
    </div>
</div>

---

然后将

newRow

附加到任何地方

既然JQuery没有内置正则表达式，那么我该如何更改属性呢？使用原生JS正则表达式有什么问题？jQuery是JavaScript，您可以同时使用它们

<div id="input-row-template" style="display: none;">
    <div class="input-row">
        <input name="location-0-bol-__INDX__-name" id="location-0-bol-__INDX__-name" class="form-control">
        <input name="location-0-bol-__INDX__-description" id="location-0-bol-__INDX__-description" class="form-control">
        <input name="location-0-bol-__INDX__-weight" id="location-0-bol-__INDX__-weight" class="form-control">
        <input name="location-0-bol-__INDX__-type" id="location-0-bol-__INDX__-type" class="form-control">
    </div>
</div>

counter++;
var newRow = $('#input-row-template').html().replace(/__INDX__/g, counter);