Jquery实时搜索效果实现问题：无法匹配下一个目标单词

我来帮你排查下问题所在～你的代码里有两个核心问题，导致每次只能匹配第一个目标单词：

问题1：条件判断逻辑错误 #

你用$(this).not('.readed')作为if的判断条件，但$(this).not('.readed')返回的是jQuery对象，在JavaScript的条件判断中，只要对象存在就会被视为true，不管元素实际有没有readed类。正确的判断应该是用!$(this).hasClass('readed')来检查元素是否未被标记。

问题2：循环内重复选中第一个元素 #

你在each循环里调用了$('.word-'+word).first()，这意味着不管循环遍历到哪个元素，每次都会修改第一个带有word-this类的元素，完全忽略了循环的意义，自然无法处理后续的单词。

修正后的代码 #

我们可以简化逻辑，直接定位到第一个未被标记的目标单词进行处理，不需要遍历所有元素：

var markNextTargetWord = function(targetWord) {
  // 筛选出第一个带有对应类名且未被标记的单词
  const nextUnreadWord = $(`span.word-${targetWord}:not(.readed)`).first();
  if (nextUnreadWord.length) {
    nextUnreadWord.css('color', 'red').addClass('readed');
  }
};

代码解释 #

1. 用CSS选择器span.word-${targetWord}:not(.readed)直接筛选出所有未被标记的目标单词，再用.first()取第一个待处理的元素。
2. 通过nextUnreadWord.length判断是否存在未处理的单词，避免无效操作。
3. 函数名改为markNextTargetWord，语义更清晰，方便后续维护。

使用示例 #

每次搜索触发（比如用户点击按钮或输入框内容变化）时，调用这个函数即可依次标记下一个目标单词：

// 比如用户点击"标记下一个"按钮时
$('#mark-next-btn').click(function() {
  markNextTargetWord('this');
});

这样就能实现每次调用时，给下一个未被标记的"this"单词添加readed类并设置红色样式啦～

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