本文介绍使用 jQuery 根据 <li> 元素的文本内容自动生成并添加对应 CSS 类的方法，例如将 <li>Brand</li> 转换为 <li class="color-brand">Brand</li>，避免硬编码索引，提升可维护性与语义化。
本文介绍使用 jquery 根据 `
在前端开发中，常需为无序或有序列表中的每一项赋予语义化、可复用的 CSS 类名（如 color-brand、color-category），而非依赖索引（如 color0、color1）。jQuery 提供了灵活的 .addClass() 方法重载形式——支持传入回调函数，该函数可访问当前元素（this）并返回要添加的类名字符串。
核心实现如下：
$(function() {
$("ul li").addClass(function() {
const text = $(this).text().trim().toLowerCase();
return `color-${text.replace(/\s+/g, '-')}`;
});
});✅ 关键处理说明：
- $(this).text() 获取列表项的纯文本内容（不含 HTML 标签）；
- .trim() 去除首尾空白，防止生成 color--brand 这类无效类名；
- .toLowerCase() 统一转为小写，确保 CSS 类名符合规范（CSS 类名不区分大小写，但惯例全小写）；
- .replace(/\s+/g, '-') 将内部空格批量替换为短横线（-），适配多词场景（如 <li>Product Type</li> → color-product-type）。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 若 <li> 中包含子标签（如 <li><strong>Brand</strong></li>），.text() 仍能正确提取全部文本；若需严格排除 HTML 结构影响，可先用 .clone().children().remove().end().text() 清理；
- 确保 jQuery 已正确加载，且 DOM 加载完成后执行（即包裹在 $(function(){...}) 或 $(document).ready(...) 中）；
- 该方法是「追加类」（addClass），不会覆盖原有 class 属性值；若需完全替换，请改用 .attr('class', ...) 并自行拼接（不推荐，易丢失原始类）。
? 进阶建议：
如需更严格的命名控制（如过滤特殊字符、限制长度、避免重复），可在回调中加入正则校验或映射表：
const classMap = { 'brand': 'brand-primary', 'category': 'cat-nav' };
$("ul li").addClass(function() {
const key = $(this).text().trim().toLowerCase();
return classMap[key] || `color-${key.replace(/[^a-z0-9]+/g, '-')}`;
});通过这种方式，列表类名真正实现了内容驱动、语义清晰、易于样式定制，是构建可扩展 UI 组件的实用技巧。
