Question

我有几个具有以下ID的输入字段：

<input type="text" name="numberC[]" id="numberC[]">
<input type="text" name="numberC[]" id="numberC[]">
<input type="text" name="numberC[]" id="numberC[]">

我通过ajax调用和数组中的push()某些值以JSON格式获取数据。

我如何创建一个循环，该循环将遍历数组，然后将每个值插入上述输入字段之一？

所以说我有以下数组：

var testArray = ['hi', 'bye', 'stackoverflow'];

，我有以下3个输入字段：

<input type="text" name="numberC[]" id="numberC[]">
<input type="text" name="numberC[]" id="numberC[]">
<input type="text" name="numberC[]" id="numberC[]">

每当我遍历它时，不幸的是，我在所有输入字段中都获得了最大值。

我尝试遍历JavaScript中的数组并将每个值插入每个输入字段中。因此testArray[0]应该在第一个输入字段中，testArray[1]在第二个输入字段中，testArray[2]在第三个输入字段中。

我使用的来源：Find DOM element by ID when ID contains square brackets?

Answer 1

dom中的id始终是唯一的。请使用document.querySelectorAll获取具有相同名称的所有元素，然后遍历它们，并使用index检查元素中是否存在元素。 testArray的索引。如果是这样，则设置输入的值

var testArray = ['hi', 'bye', 'stackoverflow'];
document.querySelectorAll('[name="numberC[]"]').forEach(function(item, index) {
  if (testArray[index]) {
    item.value = testArray[index]
  }

})

<input type="text" name="numberC[]" id="numberC[1]">
<input type="text" name="numberC[]" id="numberC[2]">
<input type="text" name="numberC[]" id="numberC[3]">

Answer 2

如果您将HTML更改为具有不同的ID

<input type="text" id="numberC[1]"/>
<input type="text" id="numberC[2]"/>
<input type="text" id="numberC[3]"/>

您可以轻松设置以下值：

    var testArray = ['hi', 'bye', 'stackoverflow'];
    for(let i in testArray) {
        document.querySelector('#numberC\\[' + (+i+1) + '\\]').value = testArray[i];
    }

定位具有相同ID且包含方括号的多个空输入字段

2 个答案: