Jquery 更改每个第一个 .not('class')

Question

我正在尝试在 Jquery 中进行有效的实时搜索，但我没有成功捕捉到文本中的第一个单词。我将每个单词都包装在这样的范围内：

<span class="word word-this" id="word-#" aria-hidden="true">this</span>

对于脚本，我尝试在我搜索的单词后面添加一个“已读”类。每次我去下一个“this”，之前的所有“this”单词都会被全班“阅读”。像这样：

var word = function(word) {
  $('span').each(function() {
    if ($(this).not('.readed') && $(this).hasClass('word-'+word)){
      // transformation
      $('.word-'+word).first().css('color', 'red').addClass('readed');
    }
  });
};

问题是它捕获了单词的第一次出现但没有找到下一个，它停留在第一个。它不承认添加了“已读”类。我不知道是 .first() 还是 .not() 问题还是其他问题。

Answer 1

我发现了两个错误。

• $('.word-'+word).first() 是第一个具有 .word-<word> 的跨度。
• $(this).not('.readed') 是一个对象，因此作为 if 语句的条件，它始终为真。

这是工作代码：

var word = function(word) {
  $('span').not('.readed').each(function() {
    if ($(this).hasClass('word-'+word)) {
      // transformation
      $(this).css('color', 'red').addClass('readed');
      // interrupt the each loop
      return false;
    }
  });
};

---

我找到了一个更简单的实现。

var word = function(word) {
  $('span.word-'+word).not('.readed').first().each(function() {
    $(this).css('color', 'red').addClass('readed');
  });
};