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

Question

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

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

对于脚本，我尝试在搜索的单词后面添加一个 "readed" class。每次我转到下一个 "this"，所有 "this" 之前的单词都有 class "readed"。像那样:

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

问题是它捕捉到单词的第一次出现，但没有找到下一个，它停留在第一个。它不承认添加了 "readed" class。我不知道这是 .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');
  });
};

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

Jquery change each first .not('class')

css

jquery

jquery-selectors

livesearch

unrecognized-selector