如何使用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>
  <h1>Heading1</h1>
</div>
<div id="heading2" class=First_heading>
  <h1>Heading2</h1>
</div>
<div id="heading3" class=First_heading>
  <h1>Heading3</h1>
</div>

Answer 2

document.getElementById（“ heading”）

将始终为您提供具有该id的第一个元素。 Document.getElementById（）

className不需要唯一，而id必须唯一。 因此，您可以使用该className遍历所有div并为其分配唯一的id 。

 window.onload = function(){ for(var tListOfElements=document.querySelectorAll('.heading'), i=0, j=tListOfElements.length; i<j; i++){ tListOfElements[i].id = tListOfElements[i].id || 'heading_' + i; tListOfElements[i].textContent = tListOfElements[i].id } }; 

 <div class = 'heading'>A</div> <div class = 'heading'>B</div> <div class = 'noheading'>C</div> <div class = 'heading'>D</div> <div class = 'heading' id = 'wannakeepmyid'>E</div>