jQuery dot in ID selector?

Question

Possible Duplicate:
How to select html nodes by ID with jquery when the id contains a dot?

I have a website that contains elements similar to this:

<p id="root.SomeCoolThing">Some Cool Thing</p>

I can not select the paragraph with jQuery like $('#root.SomeCoolThing') because jQuery thinks, SomeCoolThing is the class of an element with id="root".

How can I select this element with jQuery? I would like to avoid a construction like this:

$(document.getElementById('root.SomeCoolThing'))

http://stackoverflow.com/questions/605630/how-to-select-html-nodes-by-id-with-jquery-when-the-id-contains-a-dot — David, Mar 29 '12 at 17:45
Though there is a solution with double `\\\`. Why put a dot inside the id? — gdoron is supporting Monica, Mar 29 '12 at 17:51
Well, the website is not made from me. I do not like the ID-names either. It is, more precisely, an API documentation. — Niklas R, Mar 30 '12 at 05:38
There's nothing horrid about it- it's a perfectly valid selector according to the specifications. https://mathiasbynens.be/notes/html5-id-class — IcedDante, Oct 10 '14 at 15:46

score 272 · Accepted Answer · edited Feb 04 '15 at 12:08

272

Use the escaping rules from the jQuery selectors API as follows:

$('#root\\.SomeCoolThing')

From the 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").

edited Feb 04 '15 at 12:08

Jon Surrell

8,854
7
47
53

answered Mar 29 '12 at 17:45

charlietfl

169,044
13
113
146

1

Ah, I see. Tried it using a single backslash which did not work. Thank you! – Niklas R Mar 29 '12 at 19:52
I tried $('#root\\.SomeCoolThing'), it works. But when I try $("#root\\.SomeCoolThing") with double-quotes, it didn't work. Do you have any idea about the difference between single-quote and double-quotes in jQuery? – Kewei Shang Apr 23 '12 at 10:14
1

It doesn't work for me, I'm have two or more dots in the id. – Mathias Conradt Jun 21 '12 at 14:21
2

@charlietfl Please note, dot notation with backslashes is much quicker: http://jsperf.com/jquery-selectors-perf-test – dr.dimitru Nov 25 '14 at 15:29

score 55 · Answer 2 · answered Mar 29 '12 at 17:46

55

Using attr works:

$('p[id="root.SomeCoolThing"]')

answered Mar 29 '12 at 17:46

mikevoermans

3,947
20
27

2

'One-liners' sometimes aren't useful enough. Explain your thinking beyond a simple statement... – nickhar Nov 25 '12 at 03:19
3

This is also a lot of extra processing on jQuery's part that is unnecessary, where all you really need to do is escape the "." character... – Ian Nov 25 '12 at 07:48
13

@Ian. It is useful when you do not know the id beforehand. It could be a variable you get from a json object. – Prashant Saraswat Nov 15 '13 at 18:52

score 19 · Answer 3 · answered Mar 29 '12 at 17:46

You need to escape special chars:

$('#root\\.SomeCoolThing')

docs:

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

score 7 · Answer 4 · edited May 23 '17 at 10:31

7

You can escape period using something like this

$("#root\\.SomeCoolThing")

How do I get jQuery to select elements with a . (period) in their ID? http://groups.google.com/group/jquery-en/browse_thread/thread/ba072168939b245a?pli=1

edited May 23 '17 at 10:31

Community

1
1

answered Mar 29 '12 at 17:45

Carlos Quijano

1,538
15
21

score 4 · Answer 5 · answered Mar 29 '12 at 17:45

4

Shooting from the hip here, but if you cannot change the ID of the element, try using this selector:

$("p[id=root.SomeCoolThing]")

answered Mar 29 '12 at 17:45

BradBrening

5,362
24
30

Not without `""`: Error: Syntax error, unrecognized expression: p[id=details_it.airgap.vault]` – Giszmo Jun 25 '20 at 19:58

score 3 · Answer 6 · answered Mar 29 '12 at 17:46

3

Use two backslashes before each special character

  $('#root\\.SomeCoolThing')

answered Mar 29 '12 at 17:46

Emmanuel N

7,202
2
25
36

jQuery dot in ID selector?

6 Answers6

Linked

Related