如何使用jQuery根据字符串首单词为对应div添加指定类？

原代码问题说明 #

• 遍历范围错误：直接遍历所有.am-event元素，你的HTML结构存在嵌套的.am-event外层容器，没有对应标题元素，会导致逻辑混乱
• 匹配规则错误：仅用indexOf判断文本是否包含关键词，没有限制为首个单词，同时没有精准读取.am-event-title的文本内容，也没有处理文本首尾的空白字符

修复后代码 #

$(document).ready(function() {
  // 遍历所有事件标题元素，逐个处理对应父容器
  $(".am-event-title").each(function() {
    // 提取标题文本，去除首尾空白后拆分取第一个单词
    const titleContent = $(this).text().trim()
    const firstWord = titleContent.split(/\s+/)[0]
    const $eventParent = $(this).closest(".am-event")
    // 按首单词匹配加类
    if (firstWord === "Ballet") {
      $eventParent.addClass("ballet")
    } else if (firstWord === "Dance") {
      $eventParent.addClass("dance")
    }
  })
})

逻辑说明 #

1. 直接遍历.am-event-title元素，避免嵌套的.am-event容器干扰匹配
2. trim()方法会清除文本首尾的空格、换行符，避免开头有空白字符导致首单词判断错误
3. 用正则\s+按任意空白字符拆分文本，取数组第一项即为首单词，适配标题后带括号、空格等各种格式
4. closest()方法会精准匹配当前标题最近的父级.am-event元素，不会误操作外层嵌套容器

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