如何使用增量 id 遍历 getElementById

Question

我有一个网页有多个 ID，如“action_1”、“action_2”等。我想用 document.getElementById('action_'+i)

遍历所有这些 id

但是由于页面有一些变体，第 i 个索引是未知的。我应该如何循环所有 action_x 个 ID？

Answer 1

这种方法并不完全正确。

您可以将 class 放在您的操作的 ID 旁边。

<div class="actions"> </div>

那么您可以使用 getElementsByClassName():

这将为您提供 HTML 集合中的所有元素，然后您需要对其进行循环。

这个 post 将帮助您循环一个 HTML 集合：For loop for HTMLCollection elements

Answer 2

您可以使用 querySelector 而不是 getElementById:

document.querySelector('[id^="action_"]')

使用相同的选择器和querySelectorAll（循环每个动作）：

document.querySelectorAll('[id^="action_"]').forEach(function(action) {
  console.log(action);
});

选择器 [id^="action_"] 意思是：每个 id 属性（任何 html 标签），以“action_”开头。

详细了解 querySelectorAll 的属性选择器 here, and here。

Answer 3

修改@parnissolle的回答：

for(var i = 0; i< document.querySelector('[id^=action_]').length; i++) {
    document.getElementById('action_'+i);
}

如果有action_B之类的也没关系，因为我们只会得到id结构为'action_'+i的元素。

how to loop through getElementById with incremental id