如何使用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>

如何添加class =“ sampleClass”到每个h2标签，并使用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/zh-CN/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)标签查找它们，请使用getElementsByTagName($tagNameHere)

我已将其保存到const变量中只是为了实现可复制性，这不是必需的。

getElementsByTagName($tagNameHere)将是HTMLCollection。 它似乎是Array或List的一种，但是它没有Java的Collection中所期望的方法（ 请注意 ，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

相关链接：

HTMLCollection元素的For循环

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

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

HTMLCollection元素的For循环

Answer 3

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

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

    });