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 <a> elements with text or innerHTML that matches the number 'foo' or a custom value using javascript or jQuery.

<li><a href="#" class="dir">foo</a></li>

I have tried

jQuery(document).ready(function() {
    if (jquery().text().html("foo"){
        ('li >a').fadeOut()
    }
});

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?