如何使用 javascript 而非 jquery 给出唯一的 html 类名

Question

我是 JavaScript 新手，我想搜索 id=heading 的数量并将唯一的类名附加到现有类。

我曾尝试使用 JavaScript 做到这一点，但只能添加到第一个标题。请参考代码笔：https : //codepen.io/restar312/pen/EqWOyV

var check_div = document.getElementsByTagName('div');

var numheading = 0;

for (var i = 0; i < check_div.length; i++) {

  if (check_div[i].id.indexOf('heading') != -1)

    numheading++;

  console.log(numheading);

  var d = document.getElementById("heading");

  d.className += numheading;

}

预期的类名应该是 class=First_heading1...class=First_heading2...class=First_heading3

Answer 1

问题是您的标题具有相同的 id heading。您应该使用不同的 id 来访问不同的 DOM 元素。例如：<div id="heading1" class=First_heading>&nbsp; <h1>Heading1</h1></div><div id="heading2" class=First_heading>&nbsp; <h1>Heading2</h1></div><div id="heading3" class=First_heading>&nbsp; <h1>Heading3</h1></div>