如何为页面中100个<h3>标签自动添加不同的CSS类？

添加唯一类名的解决方案 #

没问题！要给页面上100个<h3>每个都配上独一无二的类名，你的现有代码是在循环复用固定的5个类，没法满足需求，我们只需要调整成基于元素索引生成动态类名的方式就行，具体方案如下：

方法一：基于索引生成唯一类名 #

直接利用jQuery each()方法自带的索引参数，就能为每个<h3>创建专属类名，比如h3-unique-0、h3-unique-1这类格式，代码示例：

$("body").find("h3").each(function(index) {
    // 生成带索引的唯一类名
    $(this).addClass(`h3-unique-${index}`);
});

对应的HTML结构（保持你的原有引用）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>A</h3>
<h3>B</h3>
<h3>C</h3>
<!-- 剩余97个<h3>标签 -->

不管你有多少个<h3>，每个都会得到一个不重复的类名，索引从0开始依次递增，完全适配100个元素的场景。

方法二：自定义类名规则 #

如果想自定义类名的前缀或者计数规则（比如从1开始），只需要修改addClass里的字符串即可，示例：

$("body").find("h3").each(function(index) {
    // 从1开始计数，类名前缀改为custom-heading
    $(this).addClass(`custom-heading-${index + 1}`);
});

这样生成的类名就是custom-heading-1、custom-heading-2……一直到custom-heading-100，完全符合你的需求。

补充说明 #

你的原有代码是循环复用styles数组里的5个类，当索引超过数组长度时会重置为0，所以第6个<h3>会重新使用first类，自然没法做到每个元素类名不同。而上面的方案直接利用每个元素的唯一索引生成类名，从根源上解决了重复的问题。

内容的提问来源于stack exchange，提问作者Vachos