javascript - 使用 Javascript 将类和 ID 添加到 header

Question

Zendesk 帮助中心的工作方式是将所有部分打印到页面上，而不给它们任何唯一标识符，因此如果您想实现任何类型的滚动 spy (使用您在页面上的位置更新侧导航)，这会很痛苦)，最重要的是 anchor ，以便侧导航真正起作用。

我不太懂技术，想知道是否有人知道如何使用 JS 将 ID 和类添加到一系列 header 中？

我正在考虑为 section-tree-with-article 中的每个 h2 添加唯一 ID 以及与 h2 文本匹配的类？

有什么想法吗？

Answer 1

您需要选择所有 h2 元素，迭代它们并在每次迭代时设置一个 class 以及 id。

我简单地将innerHTML 设置为class。您可以根据您的用例进行修改。

var headers = document.querySelectorAll("div.section-tree-with-article h2");

headers.forEach(function(header, idx) {
  header.className = header.textContent.replace(/\s/g, "-");      //You can modify this accordingly
  header.id = "uniqueID" + idx;            //And similarily the uniqueID
})

<div class="section-tree-with-article">
  <ul>
    <li class="section">
      <h2>Admin 0</h2>
    </li>
  </ul>
  <ul>
    <li class="section">
      <h2>Admin 1</h2>
    </li>
  </ul>
  <ul>
    <li class="section">
      <h2>Admin 2</h2>
    </li>
  </ul>
  <ul>
    <li class="section">
      <h2>Admin 3 4 5</h2>
    </li>
  </ul>
  <ul>
    <li class="section">
      <h2>Admin 4</h2>
    </li>
  </ul>
</div>

这是 jquery 中的相同解决方案:

$("div.section-tree-with-article h2").each(function(index, value){
    var classToAdd = $(this).text();
    $(this).attr('class', classToAdd);
    $(this).attr('id', "uniqueID" + index);
})