Manipulação de 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 o jQuery.

<div id="test:abc">

$('#test:abc') 

Está funcionando bem sem dois pontos. Não temos controle sobre a geração de ID, pois ela é gerada automaticamente nos sub-formulários de Trinidad, porque anexa o ID do sub-formulário :a todos os elementos dentro dele.

Você precisa escapar 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 mais abaixo), é mais fácil de manusear.

Exemplo: Digamos que você tenha uma Função

   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 métodos 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 o jquery 1.7.2

basicamente, eu selecionei 10.000 vezes de uma div com dois pontos no id - com os diferentes métodos para alcançá-lo. Então eu comparei os resultados com uma seleção de ID sem dois pontos, os resultados são bastante surpreendentes.

tempo restante no método seletor ms à direita

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

Ele está disparando nos dois pontos, obviamente, porque o jQuery está tentando interpretá-lo como um seletor. Tente usar o seletor de atributo de identificação.

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

Eu apenas usaria document.getElementByIde passaria o resultado para a jQuery()função

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 parte literal de um nome, você deve escapar do caractere com duas barras invertidas: \. Por exemplo, se você tiver um elemento com id = "foo.bar", poderá 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, enviar para a página.

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



Além disso, eu o executei 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 sintaxe $('[id="test:abc"]') funcionou para mim. Estou usando Netbeans 6.5.1e gera componentes com um idque contém um : (colon). Eu tentei o \\& the, \3Amas nenhum deles funcionou.

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