Question

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 stored value.

The config value is stored like this:

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

It is actually there and it always has the proper value.

I get nothing from jQuery – am I doing something obviously wrong here?

Edit: I’m using jQuery 1.6.4

Answer 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').