Question

    <div id="addNewMenuElementPart2">
    Imagine a lot of elements here with a name= tag.
    </div>
    <div id="addNewMenuElementPart3Optional"></div>

以及以下Javascript方法，当用户按下addNewMenuElementPart2内的按钮时，一次又一次复制addNewMenuElementPart3Optional中所有元素的副本：

    function addMoreItems() {
       var button = document.getElementById('addNewMenuElementPart2');
       var copy = button.cloneNode(true);
       document.getElementById('addNewMenuElementPart3Optional').appendChild(copy);
    }

问题在于它正在使用相同的name=标签创建每个元素。但是，为了在POST请求中提交此请求，在每个继续处理元素的名称标签上都有一个迭代器会很有帮助。

我尝试过：

  n = 1;
  function addMoreItems() {
     var button = document.getElementById('addNewMenuElementPart2');
     var copy = button.cloneNode(true);
     copy.setAttribute(name, name + n.toString())
     window.alert(copy.name);
     document.getElementById('addNewMenuElementPart3Optional').appendChild(copy);
     n++;
  }

和其他解决方案，但不起作用；它说：InvalidCharacterError: String contains an invalid character（???）

已更新（仍然无法正常工作）：

  n = 1;
  function addMoreItems() {
     var button = document.getElementById('addNewMenuElementPart2');
     var copy = button.cloneNode(true);
     var name = button.getAttribute('name');
     var copy = button.setAttribute(name, n);
     window.alert(copy);
    //window.alert(button.getAttribute('name'));
     document.getElementById('addNewMenuElementPart3Optional').appendChild(copy);
     n++;
  }

Answer 1

n = 1;
var name = "randomName";
  function addMoreItems() {
     var button = document.getElementById('addNewMenuElementPart2');
     var copy = button.cloneNode(true);
     copy.setAttribute(name, name + n.toString());
     window.alert(copy.name);
     document.getElementById('addNewMenuElementPart3Optional').appendChild(copy);
     n++;
  }

copy.setAttribute（name，name + n.toString（））后缺少分号
未设置变量“名称”。

克隆元素后，可以使用document.querySelectorAll遍历元素。这段代码一次复制3个，因为它们都具有相同的名称，但是我认为您已经解决了这个问题，因为这不是您的问题的一部分。

最后，这是我为自己的项目添加唯一属性的方法。使用Jquery。

var abcElements = document.querySelectorAll('input');
// Set their ids
for (var i = 0; i < abcElements.length; i++){
    $('input[i]').attr('name', 'exampleName' + i);
}

Answer 2

由于您没有提供所有HTML代码，因此我为您提供了一个简单的示例，说明您正在尝试实现这一目标。

我在代码段中添加了很多注释，希望对您来说这是可以理解的。

运行该代码段时，单击“ 记录我的姓名属性”按钮以显示其name属性。您会看到它们正在增加。

// Attaches on click the function which will add new <button.log-name>.
document.querySelector('#add').addEventListener('click', onClickAdd);
// Just for testing.
document.querySelector('.log-name').addEventListener('click', onClickLogName);


// Will add a new <button.log-name> when <button#add> is clicked.
function onClickAdd() {
  // Number of already existing <button.log-name>.
  const n = document.querySelectorAll('.log-name').length,
  // The node that will be cloned.
    templateNode = document.querySelector('.log-name'),
  // The clone node.
    cloneNode = templateNode.cloneNode(true);
  
  
  // Updates the [name] attribute of the clone to 'button-X'.
  // 'X' being 'n + 1'.
  cloneNode.setAttribute('name', `button-${n + 1}`);
  
  // Appends the clone after all existings <button.log-name>.
  templateNode.parentElement.appendChild(cloneNode);
  
  // Just for testing.
  cloneNode.addEventListener('click', onClickLogName);
}


// Just for testing.
// Will log the [name] attribute in the console of the clicked element.
function onClickLogName() {
  console.log(this.getAttribute('name'));
}

.border {
  margin: 3px;
  padding: 3px;

  border: 1px solid #000;
}

button {
  display: block;
}

<div class="border">
  <button class="log-name" name="button-1">Log my name attribute</button>
</div>

<div class="border">
  <button id="add">Add a button</button>
</div>

如何在cloneNode中的每个元素的每个名称值中添加迭代器？

2 个答案: