每次进行克隆时更改每个标签的 ID 的 Javascript 代码是什么？

Question

我想克隆模板并在每次克隆时以不同的 ID 显示给 <div id= "wrapper">。当我按下添加新项目按钮时，每次都会显示一个不同的 "ID" 的新模板。

Javascript代码：

$("document").ready(function () {
    var cloneCntr = 1;
    var i = 0;
    $("#projectData").on('click', function () {


        $('template').children().each(function () {
            this.id = this.id+ this.i;
        });
        var temp = document.getElementsByTagName("template")[0];
        var clon = temp.content.cloneNode(true);
        i++;
        $('#wrapper').append(clon);
      });
  });

Html代码：

 <form id="projectForm">
        <div class="container">
  //////  ---------------------code-------////           <br>
            <br>
            <h4>Project Experience</h4>
            <hr>
            <template id="template">

                    <br>
                    <br>
                    <div class="form-row">
---------Template Code-------
                    </div>

                </div>

                <hr>
            </template>
        </div>
        <div id="wrapper" class="container">

            </div>

        <button type="submit" class="btn btn-primary">Submit</button>
    </form>

    <div class="container">
        <button type="button" id="projectData" class="btn btn-primary">Add New Project</button>
    </div>

</body>
</html>

我想替换模板中的每个标签 "id"，每次我复制它时。

Answer 1

这是一个示例，说明这对您有何帮助。

在此处查看演示：https://jsfiddle.net/o76pqxyw/

这是一个屏幕共享，显示了 ID 的变化：https://www.loom.com/share/4a1556c4bb5c4422ad1d4b20a12a638a

HTML

<div id="template-form">
  <p><label>First Name</label> <input type="text" id="first-name" /></p>
  <p><label>Last Name</label> <input type="text" id="last-name" /></p>
</div>
<button id="btn">Add New User</button>

<div id="container"></div>

Javascript

const button = $('#btn');
const target = $('#container');
let counter = 0;


$(button).on('click', () => {
  const template = $('#template-form');
    const copy = $(template).clone();
  counter++;

    const elements = $(copy).find('input');
  $(elements).each(function(index) {
    const currentId = $(this).attr('id');
    const newId = currentId + '-' + counter;
    $(this).attr('id', newId);
  });

  $(target).append(copy);
})

每次进行克隆时更改每个标签的 ID 的 Javascript 代码是什么？

What will be the Javascript code for this for changing the ID of each tag while making a clone every time?

html

javascript

forms

jquery

jquery-events

HTML

Javascript