jQuery dot in ID selector?

JqueryJquery Selectors

Jquery Problem Overview


> 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'))

Jquery Solutions


Solution 1 - Jquery

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

Solution 2 - Jquery

Using attr works:

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

Solution 3 - Jquery

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

Solution 4 - Jquery

Solution 5 - Jquery

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

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

Solution 6 - Jquery

Use two backslashes before each special character

  $('#root\\.SomeCoolThing')

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionNiklas RView Question on Stackoverflow
Solution 1 - JquerycharlietflView Answer on Stackoverflow
Solution 2 - JquerymikevoermansView Answer on Stackoverflow
Solution 3 - Jquerygdoron is supporting MonicaView Answer on Stackoverflow
Solution 4 - JqueryCarlos QuijanoView Answer on Stackoverflow
Solution 5 - JqueryBradBreningView Answer on Stackoverflow
Solution 6 - JqueryEmmanuel NView Answer on Stackoverflow