157

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'))
Community
  • 1
  • 1
Niklas R
  • 16,299
  • 28
  • 108
  • 203
  • 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 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

6 Answers6

285

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

Jon Surrell
  • 9,444
  • 8
  • 48
  • 54
charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • 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
  • 2
    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
55

Using attr works:

$('p[id="root.SomeCoolThing"]')
mikevoermans
  • 3,967
  • 22
  • 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
19

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

gdoron
  • 147,333
  • 58
  • 291
  • 367
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

Community
  • 1
  • 1
Carlos Quijano
  • 1,566
  • 15
  • 23
4

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

$("p[id=root.SomeCoolThing]")
BradBrening
  • 5,418
  • 25
  • 30
  • Not without `""`: Error: Syntax error, unrecognized expression: p[id=details_it.airgap.vault]` – Giszmo Jun 25 '20 at 19:58
3

Use two backslashes before each special character

  $('#root\\.SomeCoolThing')
Emmanuel N
  • 7,350
  • 2
  • 26
  • 36