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

Question

每当单击按钮时，我的 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>

单击按钮时，我想复制元素和嵌套在其中的所有输入。但是，我需要通过将第二个数值加一来更新所有输入的名称和 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() 函数，但我不确定如何迭代所有元素并正确更新属性。有人可以提供一些指导吗？

谢谢！

Answer 1

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

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

这应该返回元素的克隆，包括其中的所有迭代（子）。

Answer 2

https://jsfiddle.net/cqyg1jwq/

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

一种方法，而不是使用正则表达式，将输入的“类型”存储在每个孩子的数据中，所以data-type="name" 用于id="location-0-bol-1-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>

jQuery

$('button').on('click', function(){
    var iteration = $('.input-row').length + 1; // how many exist already + 1

    $('.input-row:last').clone().insertAfter('.input-row:last').find('input').each(function(){

        // you can use regex to generate the id and name here if you wanted instead
        // var id=this.is; // then update the numeric value with regex
        // but I prefer to use data

        var type = $(this).data('type');
        var name = 'location-0-bol-' + iteration + '-' + type;
        $(this).attr({
            name: name,
            id: name
        })
    });;
});

Answer 3

你可以像这样制作一个你想要插入的模板：

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

记录有多少行var counter = 1;

那么当需要添加另一个实例时：

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

然后在任何地方追加newRow！