如何使用Javascript / JQuery将类和ID动态添加到特定标签

Question

这是我的html

<h1>Lorem Ipsum<h1>
<h2>Lorem Ipsum first h2<h2>
<h2>Lorem Ipsum second h2<h2>
<h2>Lorem Ipsum third h2<h2>

如何为每个h2标签添加class =“ sampleClass”，并使用javascript / jquery为每个h2标签赋予其ID和增量编号？

这样我就可以得到

<h1>Lorem Ipsum<h1>
<h2 class="sampleClass" id="0">Lorem Ipsum first h2<h2>
<h2 class="sampleClass" id="1">Lorem Ipsum second h2<h2>
<h2 class="sampleClass" id="2">Lorem Ipsum third h2<h2>

也许我必须使用循环，但是我还不能做到这一点：（

谢谢

Answer 1

不需要jQuery

document.querySelectorAll('h2').forEach(function(el, i){
  el.id = i;
  el.classList.add('sampleClass');
});

Answer 2

1。首先，您需要确保您要访问的DOM内容可用。

在纯JS / HTML中有几种技术可以做到这一点。在此处阅读更多信息：

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

，然后根据上面的页面搜索更多内容。

document.addEventListener("DOMContentLoaded", function(event) {
    const headers = document.getElementsByTagName("h2");

    Array.from(headers).forEach((header, index) => {
        header.classList.add("sampleClass")  
        header.setAttribute("id", index)
    })
});

2。其次，使用javascript文档API在页面上找到您需要的元素。

由于要按标签查找它们，请使用getElementsByTagName($tagNameHere)

我已将其保存到const变量中只是为了可重用，这不是必需的。

getElementsByTagName($tagNameHere)的结果将是HTMLCollection。 它似乎是Array或List的一种，但没有方法，这是JavaCollection中所期望的（当心！实现的HTMLCollection根据浏览器而有所不同-欢迎使用浏览器中的Javascript世界：]）。

要遍历HTMLCollection，可以使用多种解决方案。对我来说，最直观的方法是使用ES6中引入的Array.from方法将其转换为Array。

也，

如@Aboalnaga答案中所述，您可以只使用querySelectorAll("h2")-在文档中查找元素集合的另一种方法。对此进行更改，将返回为其实现了forEach的集合（至少在今天的Chrome中如此），您可以在不进行强制转换的情况下对其进行迭代。

但是

您不能真正确定每个浏览器中都会始终存在此方法（ ）（通常，您应该关心您要支持的每个浏览器中的代码行为是否相同），因此最好使用Array.from进行强制转换，而不必担心浏览器实现之间的差异。

3。向每个元素添加所需的类

由于要进行迭代，因此可以访问循环内的HTMLElement。它具有classList对象。该对象拥有用于管理元素类的API。

header.classList.add("sampleClass")

4。为每个元素添加ID

您可以使用setAttribute方法进行操作。 header.setAttribute("id", index)

index来自forEach循环。这是它的第二个论点。

也，在您最初的问题中，您还没有关闭<h1>和<h2>标签！！结束标记的语法为</h2>。在编码时要小心和详细：）。您的错误将创建所需数量两倍的标签，因为浏览器会自动为您关闭每个打开的标签。

通过解决方案链接到Codepen：

https://codepen.io/anon/pen/wExLdM

相关链接：

For loop for HTMLCollection elements

https://developer.mozilla.org/pl/docs/Web/API/Element/classList

http://clubmate.fi/javascript-adding-and-removing-class-names-from-elements/

For loop for HTMLCollection elements

Answer 3

您可以使用jquery使用以下代码执行任务

$(document).ready(function () {
        $('h2').each(function (i) {
            $(this).addClass('sampleClass');
            $(this).attr("id", i);
        });

    });