Find tag that contains certain text and add a class

Question

I have the following HTML, and I need to add a class to both <li> and <a> where the text 'Charts' exists (so not the second line, but rather the 4th and 5th). I cannot change the output of the HTML.

<div class="wp-submenu-wrap">
    <div class="wp-submenu-head">Charts</div>
    <ul>
        <li class="wp-first-item">
            <a class="wp-first-item" tabindex="1" href="admin.php?page=charts">Charts</a>
        </li>
        <li>
            <a tabindex="1" href="admin.php?page=add-chart">Add Chart</a>
        </li>
    </ul>
</div>

I've tried doing this by locating the <a> tag that contains the text, but it is not working. Can somebody please point me in the correct direction? Thanks.

Code that I've tried -

$(document).ready(function(){

    if(pagenow === 'admin_page_edit-chart') {

        var page = $('.wp-submenu-wrap a:contains["Charts"]');

        page.addClass('current');
        page.parent('li').addClass('current');

    }

});

Answer 1

It should be :contains('text'). Other than that your code looks fine.

Answer 2

Your :contains() selector is invalid.

Change:

a:contains["Charts"]

To:

a:contains("Charts")

http://jsfiddle.net/C8KVW/

Answer 3

The following code should do the job:

$(".wp-submenu-wrap a:contains('Charts')")
    .parent("li")
    .andSelf()
    .addClass("current");

Answer 4

try this

    var page = $('.wp-submenu-wrap a:contains("Charts")');

    page.addClass('current');
    page.parent().addClass('current');