如何为特定类型的所有 HTML 元素分配标识符？

Question

我的网站嵌入了来自 RSS 提要的帖子，其中一些帖子包含 <audio> 元素。在一个单独的 JS 文件中，我希望能够根据它们的 src 属性为页面上的每个 <audio> 元素分配一个唯一标识符，以便可以单独处理它们。当然，我事先并不知道会有多少个 <audio> 元素，也不知道它们的 src 属性的名称是什么。所以基本上我会有这样的东西：

<audio src="1.mp3"></audio>
<audio src="2.mp3"></audio>
<audio src="3.mp3"></audio>

...

<audio src="X.mp3"></audio>

... 其中 mp3 的文件名事先未知。所以我希望我的 JS 文件能够扫描 HTML，并且每次遇到 <audio> 元素时，将其添加到具有某种唯一标识符的列表中，以便它们都可以被告知分开。

Answer 1

我会这样做：

const matches = document.querySelectorAll("audio");

使用此方法，我们将存储在名为 matches 的常量中 DOM 中具有标记 .

的所有元素

然后你可以添加 ID，作为唯一标识符：

const matches = document.querySelectorAll("audio");

matches.forEach((match, i) => match.id = i);

在示例中，我为 DOM 中的每个音频元素添加了迭代次数（从 0 到 X）作为 ID 属性。

这是输出：

所以现在您有了一个包含 DOM 中每个音频元素的数组，并带有一个可供使用的唯一标识符

Answer 2

这是您要找的吗？使用 jQuery：JSFiddle

for (var a = 0; a < $('audio').length; a++) { //Loops every audio element
   $('audio').eq(a).attr('id', "audioNum" + a); //Adds ID from loop index
}

Answer 3

这是一个for循环解决方案。

let audio = document.querySelectorAll('audio');

for (let i = 0; i < audio.length; i++) {
  audio[i].setAttribute('id', i);
  console.log(audio[i]);
}

<audio src="1.mp3"></audio>
<audio src="2.mp3"></audio>
<audio src="3.mp3"></audio>

如何为特定类型的所有 HTML 元素分配标识符？

How to assign identifiers to all HTML elements of a particular type?

html

javascript

audio