时间戳

首页 > 解决方案 > 定位多个具有相同 ID 且包含括号的空输入字段

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

问题描述

我有几个具有以下 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]第三个输入字段。

我使用的来源：当 ID 包含方括号时，按 ID 查找 DOM 元素？

标签： javascriptjqueryajax

解决方案

idin dom 始终是唯一的。而不是用于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]">

推荐阅读