使用 Javascript 将类和 ID 添加到标头答案

【问题标题】：Adding a class and ID to headers using Javascript使用 Javascript 将类和 ID 添加到标头
【发布时间】：2017-01-12 08:57:21
【问题描述】：

Zendesk 帮助中心的工作方式是将所有部分打印到页面上，而不给它们任何唯一标识符，因此如果您想实现任何类型的滚动监视（使用您在页面上的位置更新 sidenav )，最重要的是锚点，以便 sidenav 实际工作。

我不太懂技术，想知道是否有人知道使用 JS 将 ID 和类添加到一系列标头的方法？

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

有什么想法吗？

【问题讨论】：

您应该将代码粘贴到问题中，因为代码图像不允许专家找到他们需要帮助您的内容。使用edit 按钮改进您的问题。您可能会发现 How to Ask 很有帮助。

标签： javascript class zendesk

【解决方案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);
})

【讨论】：

刚刚注意到，因为文本中包含空格，所以添加了多个类，这些空格可以替换为-s吗？最好在 jquery 中？
@tectomics 我已经相应地编辑了答案。检查并确认它是否适合您。
It does, but only for h2s with less than 3 words. 再次为你的帮助干杯。
@tectomics 再次编辑。很抱歉造成混乱。
不用道歉，你帮了我这么大的忙！非常感谢！ :)

【解决方案2】：

尽管此答案没有解决您对 JavaScript 解决方案的要求，但我建议您直接在 html 文件中使用帮助中心的内置模板系统来迭代元素并添加类。请注意，这仅适用于“专业”和“企业”Zendesk 计划。

这个例子可能不是最好的，因为你会在h2元素的class属性的值中出现空格或其他不可用的字符（它将用部分的名称替换{{name}}），但是我希望它能让您了解它是如何工作的，以及如何使用它来实现解决方案。

<div class="section-tree-with-article">
  <ul>
    {{#each sections}}
      <li class="section">
        <h2 class="{{name}}" id="{{id}}">{{name}}</h2>
      </li>
    {{/each}}
  </ul>
</div>

最终会是这样的：

<div class="section-tree-with-article">
  <ul>
    <li class="section">
      <h2 class="Admin and Settings" id="12345">Admin and Settings</h2>
    </li>
    <li class="section">
      <h2 class="Getting Started" id="45678">Getting Started</h2>
    </li>
    ...[more sections]...
  </ul>
</div>

【讨论】：