access an element with '::' in id

Question

In following fiddle: http://jsfiddle.net/Q9sHz/5/

I have an <li> with id "test1::newtest"

When I press button - enable 'Li Point1' the <li> element Li Point1 remains un draggable but if I remove the :: from the id as in fiddle: http://jsfiddle.net/Q9sHz/6/ It becomes draggable when I click the button.

Is having ':' within an ID not allowed?

[Addressed in jQuery FAQ](http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_select_an_element_by_an_ID_that_has_characters_used_in_CSS_notation.3F). You might also do an attribute selector for the ID attribute. [Demo](http://jsfiddle.net/26fzz/) — David Hedlund, Jun 08 '12 at 12:59
Similar post and answer here - http://stackoverflow.com/questions/1077084/what-characters-are-allowed-in-dom-ids — Dipak, Jun 08 '12 at 13:01

score 3 · Answer 1 · edited Jun 20 '20 at 09:12

jQuery uses the colon to build selectors. For instance $('.class:checked') or $('.class:hidden')

You'll need to escape the colon like this

test1\\:\\:newtest

From jQuery FAQs

Because jQuery uses CSS syntax for selecting elements, some characters are interpreted as CSS notation. For example, ID attributes, after an initial letter (a-z or A-Z), may also use periods and colons, in addition to letters, numbers, hyphens, and underscores (see W3C Basic HTML Data Types). The colon (":") and period (".") are problematic within the context of a jQuery selector because they indicate a pseudo-class and class, respectively.

In order to tell jQuery to treat these characters literally rather than as CSS notation, they must be "escaped" by placing two backslashes in front of them.

// Does not work
$("#some:id")

 // Works!
$("#some\\:id")

How do I select an element by an ID that has characters used in CSS notation?

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

to quote the jQuery-FAQ:

The colon (":") and period (".") are problematic within the context of a jQuery selector because they indicate a pseudo-class and class, respectively.

In order to tell jQuery to treat these characters literally rather than as CSS notation, they must be "escaped" by placing two backslashes in front of them.

as you can see, you have to escape the colons in the jquery-selector using \\. see this working example.

score 1 · Answer 3 · answered Jun 08 '12 at 12:58

working demo http://jsfiddle.net/Q9sHz/12/

You need to escape these special characters \\:\\: will do the trick for you.

code

// when button clicked ...
$('#enable').click(function() {
    // also enable li tag with id test1
    $('#test1\\:\\:newtest').draggable('enable');
});

score 0 · Answer 4 · answered Jun 08 '12 at 13:00

0

// set draggable functionality to all li tags
$('.myLi').draggable();
// disable all li tags which have the class disable
$('.disable').draggable('disable');

// when button clicked ...
$('#enable').click(function() {
    // also enable li tag with id test1
    $('#test1newtest').draggable('enable');
});

answered Jun 08 '12 at 13:00

vinay rajan

351
4
9

1

How does this address the question? – David Hedlund Jun 08 '12 at 13:02
you should read the question before posting an answer. as user470184 noticed himself, striping out the colons works - the question is how to do this _with_ colons. – oezi Jun 08 '12 at 13:04

access an element with '::' in id

4 Answers4