Question

I have some code that looks something like this:

$('.myList li:not(:contains(' + myWord + '))').css({'color' : red' });

When called, this will turn everything that doesn’t contain my keyword red.

However, this is not a case insensitive search. To make it so, I’ve tried something like this:

$('.myList li.'+toUpperCase()+':not(:contains(' + myWord.toUpperCase() + '))').css({'color' : 'red' });

But that just throws errors.

How can I do a :not(:contains search that is case insensitive?

Answer 1

I’d suggest a simpler approach:

$('.myList li').filter(function(){
    // I may have become lost in your approach, but the following
    // will filter the list to those nodes that *do not* contain
    // text equal to that contained in the myWord variable
    var text = $(this).text().toLowerCase();
    return text.indexOf(myWord.toLowerCase()) == -1;
}).css('color', red);

Note that:

$('.myList li.'+toUpperCase()+':not(:contains(' + myWord.toUpperCase() + '))').css({'color' : 'red' });

You seem to be searching for a list item with a class-name equal to the upperCase() function (which won’t happen), and then you’re looking to force the :contains() selector to be case-insensitive, which you’ve already found it isn’t.