My attempt at creating a live search with an effect in jQuery is proving to be challenging as I am struggling to capture the first word in the text. I have attempted to wrap each word in a span like this:
<span class="word word-this" id="word-#" aria-hidden="true">this</span>
In my script, I am trying to add a "readed" class to the word behind the one I am searching for. However, every time I move on to the next instance of "this", all previous instances are tagged with the "readed" class. It looks something like 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');
}
});
};
The issue I am facing is that it detects the first occurrence of the word, but it fails to identify subsequent occurrences - it remains stuck on the initial one. It seems to overlook the fact that the "readed" class has been added. I am unsure if this problem stems from the use of .first(), .not(), or some other factor.