在单击/克隆时使用 jQuery 增加 HTML 值？

Question

我有这个代码：

<div id="clonedInput1" class="clonedInput">
              <div class="row" id="item1">  <!-- item -->

                <div class="col-md-6">
                  <!-- // -->
                  <label for="one">external_ref</label>
                  <input type="text" id="external_ref" name="item[0][external_ref]" class="form-control" value="<?php echo rand(1,9999); ?><?php echo strtr($date, array('-' => '', ' ' => '',':' =>'')); ?>">
                  <!-- // -->
                  <label for="one">style</label>
                  <input type="text" name="item[0][style]" class="form-control" value="mens">
                  <!-- // -->
                  <label for="one">size</label>
                  <input type="text" name="item[0][size]" class="form-control" value="large">
                  <!-- // -->
                  <label for="one">color</label>
                  <input type="text" name="item[0][color]" class="form-control" value="white">
                  <!-- // -->
                  <label for="one">print_location</label>
                  <input type="text" name="item[0][print_location]" class="form-control" value="front">
                </div>

                <div class="col-md-6">
                  <!-- // -->
                  <label for="one">quantity</label>
                  <input type="text" name="item[0][quantity]" class="form-control" value="2">
                  <!-- // -->
                  <label for="one">x_offset</label>
                  <input type="text" name="item[0][print_x_offset]" class="form-control" value="10">
                  <!-- // -->
                  <label for="one">y_offset</label>
                  <input type="text" name="item[0][print_y_offset]" class="form-control" value="10">
                  <!-- // -->
                  <label for="one">external_url</label>
                  <input type="text" name="item[0][external_url]" class="form-control" value="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Sass_Logo_Color.svg/1280px-Sass_Logo_Color.svg.png">
                  <!-- // -->
                  <label for="one">external_thumbnail_url</label>
                  <input type="text" name="item[0][external_thumbnail_url]" class="form-control" value="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Sass_Logo_Color.svg/1280px-Sass_Logo_Color.svg.png">
                </div><!-- end right -->
              </div><!-- end item -->
              <div class="actions">
                  <span class="clone btn btn-default">Clone</span>
                  <span class="remove btn btn-danger">Remove</span>
              </div>
          </div>

这是我的 jQuery（我从这里偷来的）

<script>

var regex = /^(.+?)(\d+)$/i;
var cloneIndex = $(".clonedInput").length;

function clone(){
    $(this).parents(".clonedInput").clone()
        .insertAfter(".clonedInput:last")
        .attr("id", "clonedInput" +  cloneIndex)
        .find("*")
        .each(function() {
            var id = this.id || "";
            var match = id.match(regex) || [];
            if (match.length == 3) {
                this.id = match[1] + (cloneIndex);
            }
        })
        .on('click', 'span.clone', clone)
        .on('click', 'span.remove', remove);
    cloneIndex++;
}
function remove(){
    $(this).parents(".clonedInput").remove();
}
$("span.clone").on("click", clone);

$("span.remove").on("click", remove);

</script>

现在，它克隆得很好，我可以做到这一点。

但我需要的是每次克隆 div 时

我需要将所有“名称”标签从 item[0] 更改为 item[1]... item[2] 等等...所以每个克隆都有自己的项目编号。

这样我就可以将 jSON 发送到我的 filemaker api。

Answer 1

var myClones = $(".clonedInput");

for (var n = 0; n < myClones.length; n++) {
    myClones[n].setAttribute('name', 'clonedInput'+n);
}