How do I select an element based on its content?

Question

I need to be able to select an element that has certain content (innerHTML).

e.g. I have some anchors each with a number as their text. How can I select the anchor with '1' as its text?

I have tried this

$('a[innerHTML="1"]')

this seems to work in IE but not ff or chrome!

Answer 1

selector contains

Answer 2

Try $("a:contains('1')")

EDIT => this will alert just the text of the anchor with 1 or null if nothing is found.

alert(FindLink($("a:contains('1')"), "1"));

function FindLink(element, textToFind) {
    var result = null;
    element.each(function() {
        if ($(this).text() === textToFind)
        {
            result = $(this).text();
            // you can change any attributes or css using $(this).css, etc
            // once the if statement is satisfied
        }
    });
    return result;
}

Answer 3

Thanks for the replies. I have come up with a solution:

$('.pages a').filter(function() { return $(this).text() == 1; } )

Since the anchors I am searching are all in a common div I narrow down via that and then run a customer filter function the find the exact element.