Manipulando dois pontos no ID do elemento com jQuery

Não podemos acessar o elemento div com o ID “test: abc” no código JS usando jQuery.

$('#test:abc')

Está funcionando bem sem cólon. Não temos controle sobre a geração de ID, pois ela é gerada automaticamente nos subformulários Trinidad porque ela anexa o ID do subformulário com : a todos os elementos dentro dele.

Você precisa escaping do cólon usando duas barras invertidas:

 $('#test\\:abc') 

Em resumo

$(document.getElementById("test:abc")) é o que você deve usar.

Explicação : Além do ganho de velocidade (veja abaixo), é mais fácil de manusear.

Exemplo: digamos que você tenha uma 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); 

Velocidade / Tempo

dê uma olhada neste jsbin que testa e compara a velocidade dos methods de seleção de IDs com dois pontos

você precisa abrir o console do firebug para obter os resultados.

Eu testei com o firefox 10 e jquery 1.7.2

basicamente eu fiz um select 10’000 vezes de um div com dois pontos no id – com os diferentes methods para alcançá-lo. Então eu comparei os resultados a uma seleção de ID sem cólon, os resultados são bastante surpreendentes.

left time in ms método seletor direito

 299 $("#annoying\\:colon") 302 $("[id='annoying:colon']" 20 $(document.getElementById("annoying:colon")) 71 $("#nocolon") 294 $("[id='nocolon']") 

especialmente

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

vem um pouco como uma surpresa

Está tropeçando no cólon, obviamente, porque o jQuery está tentando interpretá-lo como um seletor. Tente usar o seletor de atributo id.

  $('[id="test:abc"]') 

Gostaria apenas de usar document.getElementById e passar o resultado para a function jQuery() .

 var e = document.getElementById('test:abc'); $(e) // use $(e) just like $('#test:abc') 

use duas barras invertidas \\

DEMO

como está escrito aqui

Se você deseja usar qualquer um dos meta-caracteres (como! “# $% & ‘() * +,. /:; < =>? @ [] ^` {|} ~) Como uma parte literal de um nome, você deve escaping o caractere com duas barras invertidas: \. Por exemplo, se você tem um elemento com id = “foo.bar”, você pode usar o seletor $ (“# foo \ .bar”). A especificação CSS do W3C contém o completo

Referência

Referindo-me à resposta de Toskan, atualizei seu código para torná-lo um pouco mais legível e, em seguida, enviei para a página.

Aqui está o link do jbin: http://jsbin.com/ujajuf/14/edit .

Além disso, eu corri com mais iterações

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

Ainda mais:

 Iterations:10000000 Results: 137987 $("#annyoing\\:colon") 140807 $("[id='annyoing:colon']" 7760 $(document.getElementById("annyoing:colon")) 32345 $("#nocolon") 146962 $("[id='nocolon']") 

tente usar $('#test\\:abc')

Essa syntax $('[id="test:abc"]') funcionou para mim. Estou usando o Netbeans 6.5.1 e ele gera componentes com um id que contém um : (colon) . Eu tentei o \\ & o \3A mas nenhum deles funcionou.

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