150

We are not able to access the div element with ID "test: abc" in JS code using jQuery.

<div id="test:abc">

$('#test:abc')

It's working fine without colon. We do not have control on ID generation as it is auto generated in Trinidad sub forms because it attaches sub form ID with : to every element inside it.

Peter O.
  • 32,158
  • 14
  • 82
  • 96
Amit Singh
  • 1,706
  • 3
  • 11
  • 7
  • basically it is good nothing was accepted, because the best answer is eventually not the top rated one (hint: check my answer) – Toskan Aug 08 '12 at 09:49
  • I'm glad you found a solution, Trinidad sub forms need to sort out their naming conventions. – Jack Apr 04 '14 at 00:23
  • IBM Domino (xpages) does the same thing. It's really jquery that's the problem, given that a colon is legitemate ID text. – user2808054 Oct 31 '18 at 09:14

9 Answers9

213

You need to escape the colon using two back-slashes:

$('#test\\:abc')
nfechner
  • 17,295
  • 7
  • 45
  • 64
90

In short

$(document.getElementById("test:abc")) is what you should use.

Explanation: Apart from the speed gain (see further down), it is easier to handle.

Example: Say you have a function

   function doStuff(id){

       var jEle = $("#" + id); //is not safe, since id might be "foo:bar:baz" and thus fail. 
       //You would first have to look for ":" in the id string, then replace it

       var jEle = $(document.getElementById(id)); //forget about the fact 
      //that the id string might contain ':', this always works
    }

    //just to give an idea that the ID might be coming from somewhere unkown
    var retrievedId = $("foo").attr("data-target-id");
    doStuff(retrievedId);

Speed / Timing

have a look at this jsbin which tests and compares the speed of selection methods of IDs with colons

you need to open your firebug console to get the results.

I tested it with firefox 10 and jquery 1.7.2

basically I did a select 10'000 times of a div with a colon in the id - with the different methods to achieve it. Then I compared results to a ID selection with no colon in it, the results are quite surprising.

left time in ms right selector method

299 $("#annoying\\:colon")

302 $("[id='annoying:colon']"

20 $(document.getElementById("annoying:colon"))


71 $("#nocolon")

294 $("[id='nocolon']")

especially

  71 $("#nocolon") and
299 $("#annoying\\:colon")

comes a bit as a surprise

Toskan
  • 13,911
  • 14
  • 95
  • 185
  • 3
    This is really useful and should be upvoted more. Even though this, $("[id='annoying:colon']", works. document.getElementById seems to be what should be used. – Irwin Jan 01 '13 at 23:29
  • 4
    Simply using a more complicated code to archive the same result just because it's faster is a case of premature optimization. You should always prefer readable code over fast code unless it's a performance bottleneck. Or in the word of [Wiliam Wulf](http://en.wikipedia.org/wiki/William_Wulf): "More computing sins are committed in the name of efficiency (without necessarily achieving it) than for any other single reason – including blind stupidity." More info [here](http://en.wikipedia.org/wiki/Program_optimization). – nfechner Mar 12 '14 at 12:29
  • 3
    Seems to be better with newer jQuery (2.1.1): **32** `$("#annyoing\\:colon")`, **29** `$("[id='annyoing:colon']")`, **5** `$(document.getElementById("annyoing:colon"))`, **8** `$("#nocolon")`, **31** `$("[id='nocolon']")` – Möhre Jun 11 '14 at 13:30
  • @Möhre that's good to hear. Sadly IE8 is still an issue (and not supported by jQuery 2). But the countdown for IE8 is ongoing http://theie8countdown.com/ – Toskan Jun 11 '14 at 16:20
  • 1
    @nfechner. What is more readable in your opinion? `$("#annoying\\:colon")` or `$(document.getElementById("annoying:colon"))` ? – Jakub Godoniuk Feb 06 '15 at 10:09
  • @JakubGodoniuk I like (as in personal preference) the first version for its brevity. I've also not seen an real-life example where the speed difference has any relevance. It sounds a bit like [premature optimization](http://c2.com/cgi/wiki?PrematureOptimization). – nfechner Feb 17 '15 at 10:29
31

It's tripping up on the colon, obviously, because jQuery is trying to interpret it as a selector. Try using the id attribute selector.

 $('[id="test:abc"]')
tvanfosson
  • 524,688
  • 99
  • 697
  • 795
10

I would just use document.getElementById, and pass the result to the jQuery() function.

var e = document.getElementById('test:abc');
$(e) // use $(e) just like $('#test:abc')
wsanville
  • 37,158
  • 8
  • 76
  • 101
7

use two backslash \\

DEMO

as written here

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

Reference

Community
  • 1
  • 1
xkeshav
  • 53,360
  • 44
  • 177
  • 245
4

Referring to Toskan's answer, I updated his code to make it a bit more readable and then output to the page.

Here's the jbin link: http://jsbin.com/ujajuf/14/edit.



Also, I ran it with more iterations

Iterations:1000000

Results:    
12794   $("#annyoing\\:colon")
12954   $("[id='annyoing:colon']"
754 $(document.getElementById("annyoing:colon"))
3294    $("#nocolon")
13516   $("[id='nocolon']")

Even More:

Iterations:10000000

Results:    
137987  $("#annyoing\\:colon")
140807  $("[id='annyoing:colon']"
7760    $(document.getElementById("annyoing:colon"))
32345   $("#nocolon")
146962  $("[id='nocolon']")
Ramsay
  • 41
  • 1
3

try using $('#test\\:abc')

Mithun Sreedharan
  • 49,883
  • 70
  • 181
  • 236
1

This syntax $('[id="test:abc"]') worked for me. I'm using Netbeans 6.5.1 & it generates components with an id that contains a : (colon). I tried the \\ & the \3A but none of them worked.

dreamcoder
  • 1,233
  • 1
  • 11
  • 25
JVR
  • 11
  • 1
0

Use $('[id=id:with:colon]').

zindel
  • 1,837
  • 11
  • 13