How do I select an element with a non-alphanumeric id using jQuery?

Question

Axl Rose's wiki page contains an element with the id:

1983.E2.80.931986:_Early_years

I'm using $('#1983.E2.80.931986:_Early_years') to get this element but that fails.

What's the correct selector to use if I want to select this element by id?

Answer 1

Straight from from the docs:

If you wish to use any of the meta-characters (such as !"#$%&'()*+,./:;<=>?@[\]^&a{|}~) 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").

Corollary:

jQuery.escapeSelector = function(str) {
  return str.replace(/[!"#$%&'()*+,./:;<=>?@\[\\\]^`{|}~]/g, "\\$&");
}

// ...

$('#' + $.escapeSelector('1983.E2.80.931986:_Early_years'))

Answer 2

you can use javascript for that

document.getElementById('1983.E2.80.931986:_Early_years')

Answer 3

Since there are those types of characters, I personally find that the easiest and most readable way is to search by ID itself such as:

$('[id*="1983.E2.80.931986:_Early_years"]')​​​​​​​ // will search for the ID anywhere

Much easier and less confusing way than having to escape characters, etc. Especially since if you ever change the ID name somehow, you won't have to worry about it's naming.

This makes the most sense if you build this ID dynamically from back-end code, it'll always prepulate correctly and work.

http://jsfiddle.net/Yt8D9/

Answer 4

The : disrupt the selection because it's reserved by css pseudoclasses (e.g. :hover). Try backslashing the :

Answer 5

escape the : and .

$('#1983\\.E2\\.80.931986\\:_Early_years')