JQuery attribute selector - am i doing something wrong?

Question

var selector = "ul.lower-menu li a[innerText=\"" + PanelSettings[tab_name_key] + "\"]"; 

I am trying to get a horizontal menu tab that has the innerText property set to a previously saved value.

The configuration value is saved as follows:

 PanelSettings[tab_name_key] = $("ul.lower-menu li:first > a").prop("innerText"); 

In fact, it exists and always has the correct meaning.

I don't get anything from jQuery - am I doing something obviously wrong here?

Edit: I am using jQuery 1.6.4

Answer 1

Yes, you are doing something wrong. Attribute selector selects elements with a specific attribute. . innerText is a property , not an attribute - as you know, using prop to set it.

You have two options. One of them is to use the selector :contains :

 "ul.lower-menu li a:contains(" + PanelSettings[tab_name_key] + ")" 

This, however, will choose foobar if you ask foo . The best option is to do the filtering yourself using filter :

 var selector = "ul.lower-menu li a"; var els = $(selector).filter(function() { return $.text([this]) === PanelSettings[tab_name_key]; }); 

Here, only those elements are selected whose textual content matches the specified parameter.

NB also, as Diodeus says, you should use text() , not prop('innerText') .

Answer 2

You might want to try filter instead of the attribute selector, which IMHO borders offensive in this case:

 var selector = "ul.lower-menu li a"; var $links = $(selector).filter(function() { return $(this).text() == PanelSettings[tab_name_key]; }); 

Answer 3

Instead:

 .prop("innerText"); 

using:

  .text() 

Answer 4

Maybe you want to use the :: (text) jQuery selector?

http://api.jquery.com/contains-selector/

Answer 5

well, this is an attribute selector, not a property selector. you cannot use such selectors. use . filter () instead of option function ()