Gestione dei due punti nell'ID elemento con jQuery

Non siamo in grado di accedere all'elemento div con ID "test: abc" nel codice JS usando jQuery.

<div id="test:abc">

$('#test:abc') 

Funziona bene senza due punti. Non abbiamo controllo sulla generazione di ID in quanto viene generato automaticamente nei sottomaschere Trinidad perché associa l'ID sottomodulo :a ogni elemento al suo interno.

Devi fuggire dai due punti usando due barre rovesciate:

$('#test\\:abc')

In breve

$(document.getElementById("test:abc")) è quello che dovresti usare.

Spiegazione : Oltre al guadagno di velocità (vedere più in basso), è più facile da gestire.

Esempio: supponi di avere una funzione

   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); 

Velocità / timing

dai un'occhiata a questo jsbin che verifica e confronta la velocità dei metodi di selezione degli ID con i due punti

è necessario aprire la console Firebug per ottenere i risultati.

L'ho provato con Firefox 10 e jquery 1.7.2

fondamentalmente ho fatto 10.000 volte selezionate di un div con due punti nell'id - con i diversi metodi per ottenerlo. Quindi ho confrontato i risultati con una selezione ID senza due punti, i risultati sono piuttosto sorprendenti.

tempo sinistro nel metodo di selezione destro ms

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

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

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


71 $("#nocolon")

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

particolarmente

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

arriva un po 'come una sorpresa

Sta inciampando sui due punti, ovviamente, perché jQuery sta cercando di interpretarlo come un selettore. Prova a utilizzare il selettore dell'attributo id.

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

Vorrei solo usare document.getElementByIde passare il risultato alla jQuery()funzione.

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

usare due barre rovesciate \\

DEMO

come scritto qui

Se desideri utilizzare uno dei meta-caratteri (come! "# $% & '() * +,. / :; <=>? @ [] ^` {|} ~) Come parte letterale di un nome, è necessario sfuggire al carattere con due barre rovesciate: \. Ad esempio, se si dispone di un elemento con id = "foo.bar", è possibile utilizzare il selettore $ ("# foo \ .bar"). La specifica CSS W3C contiene il completo

Riferimento

Facendo riferimento alla risposta di Toskan, ho aggiornato il suo codice per renderlo un po 'più leggibile e quindi l'output sulla pagina.

Ecco il link jbin: http://jsbin.com/ujajuf/14/edit .



Inoltre, l'ho eseguito con più iterazioni

Iterations:1000000

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

Ancora di più:

Iterations:10000000

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

prova ad usare $('#test\\:abc')

Questa sintassi ha $('[id="test:abc"]') funzionato per me. Sto usando Netbeans 6.5.1e genera componenti con un idche contiene a : (colon). Ho provato il \\& the \3Ama nessuno di loro ha funzionato.

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