CODEWITHSUNDEEP
jquery
Boris Callens
Boris Callens

Reputation: 93327

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

If my html looked like this:

<td class="controlCell">
    <input class="inputText" id="SearchBag.CompanyName" name="SearchBag.CompanyName" type="text" value="" />
</td>

How could I select #SearchBag.CompanyName with JQuery? I can't get it to work and I fear it's the dot that's breaking it all. The annoying thing is that renaming all my id's would be a lot of work, not to mention the loss in readability.

Note:
Please let's not start talking about how tables are not made for lay-outing. I'm very aware of the value and shortcomings of CSS and try hard to use it as much as possible.

Upvotes: 195

Views: 92984

Answers (8)

Blender
Blender

Reputation: 298166

You don't need to escape anything if you use document.getElementById:

$(document.getElementById('strange.id[]'))

getElementById assumes the input is just an id attribute, so the dot won't be interpreted as a class selector.

Upvotes: 38

oneiros
oneiros

Reputation: 3568

Short Answer: If you have an element with id="foo.bar", you can use the selector $("#foo\\.bar")

Longer Answer: This is part of the jquery documentation - section selectors which you can find here: http://api.jquery.com/category/selectors/

Your question is answered right at the beginning of the documentation: 

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"). The W3C CSS specification contains 
the complete set of rules regarding valid CSS selectors. Also useful is the 
blog entry by Mathias Bynens on CSS character escape sequences for identifiers.

Upvotes: 20

ntroccoli
ntroccoli

Reputation: 44

You can use an attribute selector:

$("[id='SearchBag.CompanyName']");

Or you can specify element type:

$("input[id='SearchBag.CompanyName']");

Upvotes: 1

Jon Surrell
Jon Surrell

Reputation: 9637

This is documented in the jQuery selectors API:

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

In short, prefix the . with \\.

$('#SearchBag\\.CompanyName')

The problem is that . will match a class, so $('#SearchBag.CompanyName') would match <div id="SearchBag" class="CompanyName">. The escaped with \\. will be treated as a normal . with no special significance, matching the ID you desire.

This applies to all the characters !"#$%&'()*+,./:;<=>?@[\]^`{|}~ which would otherwise have special significance as a selector in jQuery.

Upvotes: 5

bishop
bishop

Reputation: 39394

attr selection seems to be appropriate when your ID is in a variable:

var id_you_want='foo.bar';
$('[id="' + id_you_want + '"]');

Upvotes: 12

Abhishek
Abhishek

Reputation: 1618

Guys who's looking for more generic solution, I found one solution which inserts one backward slashes before any special characters, this resolves issues related to retrieving name & ID from a div which contains special characters.

"Str1.str2%str3".replace(/[^\w\s]/gi, '\\$&')

returns "Str1\\.str2\\%str3"

Hope this is useful !

Upvotes: 2

bobince
bobince

Reputation: 536379

@Tomalak in comments:

since ID selectors must be preceded by a hash #, there should be no ambiguity here

“#id.class” is a valid selector that requires both an id and a separate class to match; it's valid and not always totally redundant.

The correct way to select a literal ‘.’ in CSS is to escape it: “#id\.moreid”. This used to cause trouble in some older browsers (in particular IE5.x), but all modern desktop browsers support it.

The same method does seem to work in jQuery 1.3.2, though I haven't tested it thoroughly; quickExpr doesn't pick it up, but the more involved selector parser seems to get it right:

$('#SearchBag\\.CompanyName');

Upvotes: 235

Tomalak
Tomalak

Reputation: 338208

One variant would be this:

$("input[id='SearchBag.CompanyName']")

Upvotes: 137

Related Questions