如何使用jQuery检测Div包含指定文本并添加对应类名

你的代码问题出在精确匹配文本上——目标.am-event元素的文本内容不只是"Ballet"或"Yoga"，还包含了嵌套元素里的"Open"文本以及空格，所以$(this).text().trim() == "Ballet"这种严格相等的判断永远不会成立。

我们只需要把精确匹配改成包含判断，再优化一下代码结构，就能实现需求了：

修正后的JavaScript代码 #

// 先定义关键词和对应类名的映射，后续扩展更方便
const keywordClassMap = {
  "Ballet": "ballet",
  "Yoga": "yoga"
};

$(".am-event").each(function() {
  const elementText = $(this).text().trim();
  // 遍历映射对象，检查文本是否包含关键词
  for (const [keyword, className] of Object.entries(keywordClassMap)) {
    if (elementText.includes(keyword)) {
      $(this).addClass(className);
      break; // 找到匹配的关键词后就停止遍历
    }
  }
});

代码说明 #

• 用includes()方法检查文本是否包含目标关键词（如果需要兼容IE等旧浏览器，可以换成elementText.indexOf(keyword) !== -1）
• 用映射对象管理关键词和类名，后续添加新规则（比如"Pilates"对应"pilates"类）只需要在对象里加一行，不用修改循环逻辑
• 找到匹配的关键词后用break避免重复添加类

完整可运行代码示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.am-event { 
  display: block; 
  padding: 10px; 
  border: 1px solid grey; 
  margin: 5px 0;
} 
.ballet { 
  background: red; 
} 
.yoga { 
  background: pink; 
}
</style>
<div id="am-event-22" class="am-event" style="pointer-events: all;">
  <div class="am-event-data">
    <div class="am-event-info">
      <div class="am-event-title">Ballet <span class="am-event-booking-status open">Open</span></div>
    </div>
  </div>
</div>
<div id="am-event-23" class="am-event" style="pointer-events: all;">
  <div class="am-event-data">
    <div class="am-event-info">
      <div class="am-event-title">Yoga <span class="am-event-booking-status open">Open</span></div>
    </div>
  </div>
</div>
<div id="am-event-24" class="am-event" style="pointer-events: all;">
  <div class="am-event-data">
    <div class="am-event-info">
      <div class="am-event-title">Ballet <span class="am-event-booking-status open">Open</span></div>
    </div>
  </div>
</div>
<script>
const keywordClassMap = {
  "Ballet": "ballet",
  "Yoga": "yoga"
};

$(".am-event").each(function() {
  const elementText = $(this).text().trim();
  for (const [keyword, className] of Object.entries(keywordClassMap)) {
    if (elementText.includes(keyword)) {
      $(this).addClass(className);
      break;
    }
  }
});
</script>

这样修改后，所有包含"Ballet"的.am-event元素会自动添加ballet类，包含"Yoga"的会添加yoga类，完美实现你的需求～

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