163

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'))
4
  • stackoverflow.com/questions/605630/…
    – David
    Commented Mar 29, 2012 at 17:45
  • Though there is a solution with double `\\`. Why put a dot inside the id?
    – gdoron
    Commented Mar 29, 2012 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
    Commented Mar 30, 2012 at 5:38
  • There's nothing horrid about it- it's a perfectly valid selector according to the specifications. mathiasbynens.be/notes/html5-id-class
    – IcedDante
    Commented Oct 10, 2014 at 15:46

6 Answers 6

293

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

4
  • 1
    Ah, I see. Tried it using a single backslash which did not work. Thank you!
    – Niklas R
    Commented Mar 29, 2012 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? Commented Apr 23, 2012 at 10:14
  • 2
    It doesn't work for me, I'm have two or more dots in the id. Commented Jun 21, 2012 at 14:21
  • 2
    @charlietfl Please note, dot notation with backslashes is much quicker: jsperf.com/jquery-selectors-perf-test
    – dr.dimitru
    Commented Nov 25, 2014 at 15:29
57

Using attr works:

$('p[id="root.SomeCoolThing"]')
3
  • 2
    'One-liners' sometimes aren't useful enough. Explain your thinking beyond a simple statement...
    – nickhar
    Commented Nov 25, 2012 at 3: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
    Commented Nov 25, 2012 at 7: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. Commented Nov 15, 2013 at 18:52
18

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

0
8

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

4

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

$("p[id=root.SomeCoolThing]")
1
  • Not without "": Error: Syntax error, unrecognized expression: p[id=details_it.airgap.vault]`
    – Giszmo
    Commented Jun 25, 2020 at 19:58
3

Use two backslashes before each special character

  $('#root\\.SomeCoolThing')

Not the answer you're looking for? Browse other questions tagged or ask your own question.