jQuery select ID containing dot

Question

I have some nodes which may occasionally contain a dot in their ID attribute,

Example: <div id="site_someSite.com"></div>

Then I need to select this element ( I'm using jQuery ) and I do this:

variable = $('#site_'+user); user being 'someSite.com'

And I get nothing in the variable. I suppose this is due to the dot in the name which jQuery is accepting as a class. Anyone has any idea how I can work around this without not-using a dot?

possible duplicate of [How to select html nodes by ID with jquery when the id contains a dot?](http://stackoverflow.com/questions/605630/how-to-select-html-nodes-by-id-with-jquery-when-the-id-contains-a-dot) — Teepeemm, May 07 '15 at 00:45

Suresh Atta · Answer 1 · 2013-06-20T15:18:09.540

7

You can use it but escape it by backslashes,like $('#example\\.afterdottext');

As per 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: \.

edited Jun 20 '13 at 15:18

answered Jun 20 '13 at 15:12

Suresh Atta

120,458
37
198
307

score 6 · Answer 2 · answered Jun 20 '13 at 15:19

Working jsFiddle Demo

Use attribute selectors¹:

var site = 'someSite.com';
var variable = $('[id="site_' + site + '"]');

// do something
variable.css('background', 'yellow');

References:

¹ Attribute Equals Selector [name="value"] - jQuery API Documentation

Adil Shaikh · Answer 3 · 2013-06-20T15:25:51.803

5

You can do this -

variable = $('#site_'+user.replace(/\./g,'\\.'));

Demo ---> http://jsfiddle.net/wdJka/2/

edited Jun 20 '13 at 15:25

answered Jun 20 '13 at 15:11

Adil Shaikh

44,509
17
89
111

Doesn't seem to pick that up either :/ – php_nub_qq Jun 20 '13 at 15:12

score 4 · Accepted Answer · answered Jun 20 '13 at 15:22

If all you need to do is select by the id, then you can use document.getElementById:

var div = document.getElementById('site_'+user);

Note that this will obviously give a native DOM element. If you need a jQuery selection, you can wrap this in the jQuery constructor:

var div = $(document.getElementById('site_'+user));

This has the additional advantage of being faster! Obviously it won't work if you have anything else in your selector.

jQuery select ID containing dot

4 Answers4