using a variable in :contains - how to

Question

I am using accordion menu on an e-commerce site. The menu stays open with the options until the product page. On that page I am trying to use the breadcrumbs to match text in the menu and then apply a class to open the menu to the correct category for the page.

Here is my code:

$(document).ready(function(){
 var bctext = $('#ProductBreadcrumb ul li:last-child').prev('li').children().text();
$('ul#accordion a:contains(bctext)').parent().parent().addClass('special');

 });

The variable returns the correct text, and if I put a matching string ("Tomato Sauces") in the :contains it works just like I want it to and applies the class. However when I use bctext variable it wont work.

I also tried a:contains($(bctext)) and it didn't work. Is it my syntax?

Thanks

Answer 1

Try:

$('ul#accordion a:contains(' + bctext + ')')

Answer 2

Change:

$('ul#accordion a:contains(bctext)').parent().parent().addClass('special');

to:

$('ul#accordion a:contains(' + bctext + ')').parent().parent().addClass('special');

The first way, the way you had it, is telling JavaScript to use the string 'bctext' as the contains parameter. What you actually want is the string which is contained within the bctext variable. Therefore you have to use it outside of the quotes and use concatenation to create your selector string.

Answer 3

This line should be:

$('ul#accordion a:contains(' + bctext + ')').parent().parent().addClass('special');

Answer 4

You could use Traversing/contains also:

$('ul#accordion a').contains(bctext);

Answer 5

This is a special-character-save version, that uses filter instead of the deprecated contains method.

$('ul#accordion a').filter(function () { return $(this).text() == bctext; })

Answer 6

$('ul#accordion a').filter(':contains(' + bctext + ')'  

is now preferred to the deprecated

$('ul#accordion a').contains(bctext); 

(as commented by Crescent Fresh)