Jquery Attribute Selector - Am I Doing Something Wrong?

var selector = 'ul.lower-menu li a[innerText=\'' + PanelSettings[tab_name_key] + '\']'; I'm trying to get horizontal menu tab that has innerText property set to the previously sto

Solution 1:

Yes, you are doing something wrong. The attribute selector selects elements that have a certain attribute set. innerText is a property, not an attribute – as indeed you recognise by using prop to set it.

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

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

This, however, would select foobar if you asked for foo. The better 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];
});

This selects only the elements whose text content is the same as the setting given.

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

Solution 2:

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

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

Solution 3:

Instead of:

.prop("innerText");

use:

.text()

Solution 4:

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

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

Solution 5:

well, it is an attribute selector, not a property selector. you can't use selectors like that. use .filter() with the function() variant instead