本文介绍如何使用 jQuery 根据 <li> 元素的文本内容（如 “Brand”）自动生成并添加对应类名（如 color-brand），避免硬编码索引，提升代码可维护性与语义化程度。

本文介绍如何使用 jquery 根据 `

` 元素的文本内容（如 “brand”）自动生成并添加对应类名（如 `color-brand`），避免硬编码索引，提升代码可维护性与语义化程度。

在实际前端开发中，我们常需为列表项赋予语义化、可复用的 CSS 类名（例如 color-brand、color-category），而非依赖索引（如 color0、color1）。jQuery 提供了 addClass() 方法的函数式用法，可针对每个匹配元素动态计算并返回类名，完美解决该需求。

核心实现如下：

$("ul li").addClass(function() {
  return `color-${$(this).text().toLowerCase().trim()}`;
});

✅ 关键点说明：

• $(this).text() 获取当前 <li> 的纯文本内容（不含 HTML 标签）；
• .toLowerCase() 统一转为小写，确保类名符合 CSS 命名规范（避免大小写敏感问题）；
• .trim() 清除首尾空白字符（防止生成 color- brand 这类非法类名）；
• 模板字符串 `color-${...}` 构建语义化类名，如 <li>Brand</li> → class="color-brand"。

? 完整示例：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

立即学习“前端免费学习笔记（深入）”；

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="sd-list">
  <li>Brand</li>
  <li>Category</li>
  <li>Price Range</li>
  <li>Color</li>
</ul>

执行上述脚本后，DOM 将变为：

<li class="color-brand">Brand</li>
<li class="color-category">Category</li>
<li class="color-price-range">Price Range</li>
<li class="color-color">Color</li>

⚠️ 注意事项：

• 若文本含空格、特殊符号（如 /、&），建议进一步清洗（例如用正则替换非字母数字字符为连字符）：

  $(this).text().toLowerCase().trim().replace(/[^a-z0-9\s-]/g, '').replace(/\s+/g, '-')

• 如需兼容旧版浏览器（不支持模板字符串），可用普通字符串拼接：

  "color-" + $(this).text().toLowerCase().trim()

• 若目标元素有原有类名，addClass() 会追加新类，不会覆盖；若需完全替换，请改用 attr("class", ...)，但需谨慎处理已有样式。

通过此方法，列表项类名真正反映其语义内容，便于后续编写 BEM 风格 CSS 或进行精细化样式控制，显著提升代码可读性与可扩展性。