Hide all 'a' elements with text or innerHTML that matches the number '0' or a custom value using javascript or jQuery

Question

I need to Hide all elements with text or innerHTML that matches the number \'foo\' or a custom value using javascript or jQuery.

Answer 1

$('a:contains(foo)').hide();

Done.

Or:

var customValue = "foo"
$('a').filter(function(){
    return this.innerHTML === customValue;
}).fadeOut();

With the later option you custom it a lot more, like:

var customValue = "foo"
$('a').filter(function(){
    return this.innerHTML === customValue &&
           $(this).closest('div').length;
}).fadeOut();

Answer 2

One approach, assuming the text you're searching for is exactly the string you use, _{shamelessly stealing from} paying homage to Jonathan Sampson:

Creating the :exactly selector:

$.extend($.expr[":"], {
    exactly: function( element, index, details, collection ){
        return $(element).text() === details[3];
    }
});

Used like so:

$('a:exactly("foo")').fadeOut();

References:

• Jonathan Sampson:
  • The blog entry for :exactly() selector: http://sampsonblog.com/279/creating-your-own-custom-jquery-filters
  • The Stack Overflow question that prompted the creation of :exactly(): Is there any selector to do a perfect match against text?