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

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