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?

I found this that might be useful: http://stackoverflow.com/questions/350292/how-do-i-get-jquery-to-select-elements-with-a-period-in-their-id — Jason, Feb 07 '13 at 14:27
that should work, something else must be wrong.http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — hvgotcodes, Feb 07 '13 at 14:27
Just tried it myself. Yeap, it's not working. Though all your characters should be valid. — Richard Neil Ilagan, Feb 07 '13 at 14:28
this seems highly incompatible design. well maybe not highly, but annoying — Nick Ginanto, Feb 07 '13 at 14:29
The double-backslash method from @jlg1987 's link works. `$('#updates-pane.user\\.followed_on')` successfully selects the `div`. — Richard Neil Ilagan, Feb 07 '13 at 14:30
@NickGinanto Actually, it matches the behavior of CSS selectors exactly. How else would you select an element that has both the id and the class? — JJJ, Feb 07 '13 at 14:33
Even though it may be allowed, it's best to avoid adding these characters in the ID attribute - simply because it's not good practice with jQuery :) Good question though, +1! — Jimbo, Feb 07 '13 at 14:38

score 32 · Accepted Answer · edited Feb 07 '13 at 17:11

32

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."

edited Feb 07 '13 at 17:11

T Zengerink

3,983
5
27
31

answered Feb 07 '13 at 14:26

Jimbo

24,043
14
77
118

but according to http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html it may include periods – Nick Ginanto Feb 07 '13 at 14:27
Yep, they just don't say what the jQuery docs say - try **two** backslashes :) – Jimbo Feb 07 '13 at 14:29
1

@NickGinanto The ID may have a period, yes. But jQuery assumes it means a class when put inside a selector, so you have to escape it. 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." – Blazemonger Feb 07 '13 at 14:31
Thanks for fixing that @Blazemonger - obviously SO pastes don't always work well ;) I'll add your advisement also. – Jimbo Feb 07 '13 at 14:34
@Blazemonger: And not only jQuery, but also CSS. – BoltClock Feb 09 '13 at 08:53

score 4 · Answer 2 · answered Feb 07 '13 at 14:30

Yes, HTML5 allows period in id but jQuery isn't built by the w3 org. It's just a utility library optimized for the most common cases.

If your ID has a period, or any other character making jQuery parse it as more than just an id, then you'd better use the standard function :

$(document.getElementById(yourId))

This is the preferred solution if your id comes from a variable.

ssilas777 · Answer 3 · 2013-03-04T18:33:55.507

4

$("#updates-pane-user\\.followed_on") - This Should work as per the Jquery documentation

// Does not work
 $("#some:id")

 // Works!
 $("#some\\:id")

 // Does not work
 $("#some.id")

 // Works!
 $("#some\\.id")

edited Mar 04 '13 at 18:33

answered Feb 07 '13 at 14:31

ssilas777

9,166
3
41
63

score 3 · Answer 4 · answered Feb 07 '13 at 14:28

3

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">

answered Feb 07 '13 at 14:28

kidwon

4,080
4
25
44

score 2 · Answer 5 · answered Feb 07 '13 at 14:27

2

Because . selector considers that there is a class with the following name

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

means : find all elements with id = updates-pane-user which have class name followed_on

answered Feb 07 '13 at 14:27

sdespont

13,371
7
52
89

score 2 · Answer 6 · answered Feb 07 '13 at 14:29

2

Use this to escape your dot:

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

Reference: http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_select_an_element_by_an_ID_that_has_characters_used_in_CSS_notation.3F

answered Feb 07 '13 at 14:29

Lim H.

9,049
9
43
70

open and free · Answer 7 · 2015-04-20T13:31:31.027

For sure period creating problem for JQuery to recognise the pattern.

jQuery has three type of selectors:

"." selector means to select an element by class name.
"#" selector means to select an element by ID.
And Element selector that selects elements by their name(div, input etc.)

And you have confused jQuery engine with your naming convention of ID.

Its assuming that there is a div with id="updates-pane-user" and a applied class="followed_on". In such cases jQuery suggest to escape sequence using //. Below should be your syntex to select the element.

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

Check it out this wrong fiddle and try to correct using // : http://jsfiddle.net/ukJ8Z/

Cheers!!

score 1 · Answer 8 · answered Feb 07 '13 at 14:29

1

yes Jimbo answer is correct, but you can still make that work with escaping character with \\

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

Escape with TWO (2) backslashes.

Check this link for How do I select an element by an ID that has characters used in CSS notation?

answered Feb 07 '13 at 14:29

Hary

5,208
6
31
67

The double backslash *was part of my original answer*, so not sure why you put "... **but** you can still make that work with escaping character with \\" ;) – Jimbo Feb 07 '13 at 14:36
@Jimbo, yes i think you updated your answer after adding backslash becoz i dint find it initially. `so not sure why you put "`. What do you meant? i dint understand – Hary Feb 07 '13 at 14:47

score 0 · Answer 9 · answered Oct 09 '15 at 10:03

0

You can also use the id attribute selector, like:

$('[id="updates-pane-user.followed_on"]')

because jQuery will treat the attribute as a string, rather than a jQuery class selector.

answered Oct 09 '15 at 10:03

Nick Pyett

3,068
1
20
27

Why doesn't this jquery selector with a period work

9 Answers9

Linked

Related