基于Span文本匹配为父元素添加类的jQuery实现求助

我来帮你搞定这个需求，先梳理下你现有代码里的几个问题，再一步步写出能正常工作的实现：

现有代码的问题 #

1. 选择器错误：你写的$('#main_list').find("div:contains(ids_to_star)")完全没命中目标——首先目标是<span>不是<div>，其次contains()里直接写变量名是把它当字符串匹配，不会用变量的实际值。
2. 层级判断错误：就算找到了目标<span>，它的直接父元素是<a>，不是<li>，直接用parent('li')会找不到元素。
3. 匹配逻辑缺失：没有处理「不区分大小写、忽略下划线/空格」的要求，直接用contains()做不到这一点。
4. HTML规范问题：你的代码里多个<span>用了同一个id="displayname"，这违反了HTML规则（id必须唯一），会导致选择器失效或行为异常，得先修正这个。

正确实现步骤&代码 #

第一步：修正HTML结构 #

先把重复的id改成class，这是必须的：

<div id="main_list">
  <li>
    <a data-item_number_id="555000" class="item">
      <span class="displayname">greyblackhammer</span>
    </a>
  </li>
  <li>
    <a data-item_number_id="555002" class="item">
      <span class="displayname">grey_green_hammer</span>
    </a>
  </li>
  <li>
    <a data-item_number_id="555004" class="item">
      <span class="displayname">red_orangehammer</span>
    </a>
  </li>
</div>

第二步：jQuery实现代码 #

// 你的目标单词列表
var list_of_words = ["Green", "black", "other_words"];

// 预处理单词：转成不区分大小写的正则，同时转义特殊字符避免正则报错
var regexList = list_of_words.map(word => {
  const escapedWord = word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  return new RegExp(escapedWord, 'i');
});

function star_matching_items() {
  // 遍历所有目标span元素
  $('#main_list .displayname').each(function() {
    const $currentSpan = $(this);
    // 处理文本：去掉下划线、空格，转小写，统一匹配格式
    const processedText = $currentSpan.text().replace(/[_ ]/g, '').toLowerCase();
    
    // 检查是否匹配任意一个目标单词
    const isMatch = regexList.some(regex => regex.test(processedText));
    
    if (isMatch) {
      // 找到最近的父级li，添加starred类
      $currentSpan.closest('li').addClass('starred');
    }
  });
}

// 页面加载完成后执行函数
$(document).ready(function() {
  star_matching_items();
});

代码关键点说明 #

• 正则预处理：把每个单词转成不区分大小写的正则，同时转义.、*等正则特殊字符，避免语法错误。
• 文本统一处理：去掉下划线和空格、转小写，这样不管原文本是Green、green_还是green hammer都能匹配成功。
• 可靠的父元素查找：用.closest('li')代替多层parent()，即使HTML结构微调（比如中间加了其他元素），也能准确找到对应的<li>。
• 性能优化：直接选择所有.displayname元素遍历，比先找父容器再逐层查找子元素更高效，适合处理数千条条目的场景。

如果暂时没法修改HTML的id，可以把选择器改成$('#main_list span[id="displayname"]')，但还是强烈建议改成class，避免浏览器出现不可预测的行为。

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