Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Selecting an ID with a colon in it with jQuery

I'm working on a pre-written module for a site, and I need to target an element with the id test:two. Now, this element has a colon in it, so jQuery is presumably and understandably seeing the 'two' as a pseudo class. Is there any way of targeting this element with jQuery?

Also, changing the ID is not possible. Believe me, if I could I would.

I've put together an example:

$('#test').css('background','red');  $(document.getElementById('test:two')).css('background','blue');  $('#test:two').css('background','green');
<script src="//code.jquery.com/jquery-1.6.3.js"></script>    <div id="test">test</div>  <div id="test:two">test two</div>
like image 927
Geoff Avatar asked Sep 15 '11 16:09

Geoff


People also ask

How do you select element by id in jQuery?

The jQuery #id selector uses the id attribute of an HTML tag to find the specific element. An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.

What is the use of colon in jQuery?

Note that there are two differences above: the first selector is prefixed with a colon and has quotes for the input type. One is the specialized :input selector, while the other is a generic Element selector.

How do you select an element with ID data '?

Use the querySelector method to get an element by data attribute, e.g. document. querySelector('[data-id="box1"]') . The querySelector method returns the first element that matches the provided selector or null if no element matches the selector in the document.

What is ID selector in Javascript?

Definition and Usage The #id selector selects the element with the specific id. The id refers to the id attribute of an HTML element. Note: The id attribute must be unique within a document. Note: Do not start an id attribute with a number.


2 Answers

Simply escape the colon with a \\:

$('#test\\:two'); 

http://jsfiddle.net/zbX8K/3/


See the docs: How do I select an element by an ID that has characters used in CSS notation?.

like image 115
Joseph Silber Avatar answered Oct 08 '22 20:10

Joseph Silber


From the jQuery ID Selector docs:

If the id contains characters like periods or colons you have to escape those characters with backslashes.

Because the backslash itself need to be escaped in the string, you'll need to do this:

$("#test\\:two") 

$('#test').css('background','red');  $(document.getElementById('test:two')).css('background','blue');  $('#test\\:two').css('background','green');
<script src="//code.jquery.com/jquery-1.6.3.js"></script>    <div id="test">test</div>  <div id="test:two">test two</div>

You now also have the option of using the built-in CSS.escape(...) function, which takes care of any characters that could have special meaning inside of a selector expression.

$("#" + CSS.escape("test:two")) 

$('#test').css('background','red');  $(document.getElementById('test:two')).css('background','blue');  $("#" + CSS.escape("test:two")).css('background','green');
<script src="//code.jquery.com/jquery-1.6.3.js"></script>    <div id="test">test</div>  <div id="test:two">test two</div>
like image 35
Jeremy Avatar answered Oct 08 '22 18:10

Jeremy