Why doesn't this jquery selector with a period work

Question

I have a div with an ID

<div id="updates-pane-user.followed_on">

this jquery selector works

$("[id^='updates-pane']")

but this doesn't

$("#updates-pane-user.followed_on")

I don't see what is wrong.. id names can include periods right? Am I missing something obvious?

Answer 1

In the latter selector, . is used to denote a class. So it's looking for the .followed_on class, which it obviously doesn't find and so nothing is matched.

In order to fix this, I think you should escape the dot with a double-backslash:

$("#updates-pane-user\\.followed_on")

According to the jQuery docs:

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \\. For example, an element with id="foo.bar", can use the selector $("#foo\\.bar").

In general, try not to use periods or other special characters in your IDs to avoid confusion all around. "Allowed" is not the same as "good practice."

Answer 2

Because of the dot in the id attribute which in jQuery syntax represents class selector. This selector is equivalent to selecting node as:

<div id="updates-pane-user" class="followed_on">