Gestire i 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.

$('#test:abc')

Funziona bene senza due punti. Non abbiamo il controllo sulla generazione dell’ID in quanto viene generato automaticamente nelle sotto-forms di Trinidad perché associa l’ID sotto forma con : a ogni elemento al suo interno.

Hai bisogno di sfuggire al colon usando due barre posteriori:

 $('#test\\:abc') 

In breve

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

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

Esempio: dì che hai 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à / Temporizzazione

dare 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

in pratica ho fatto una selezione di 10’000 volte di un div con i due punti nell’ID – con i diversi metodi per raggiungerlo. Poi ho confrontato i risultati con una selezione ID senza colon, i risultati sono abbastanza sorprendenti.

tempo rimasto nel metodo di selezione destra 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 ‘a sorpresa

Ovviamente sta saltando sul colon, perché jQuery sta cercando di interpretarlo come un selettore. Prova a utilizzare il selettore di attributo id.

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

Vorrei semplicemente usare document.getElementById e passare il risultato alla funzione jQuery() .

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

usa due backslash \\

DEMO

come scritto qui

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

Riferimento

Riferendomi alla risposta di Toskan, ho aggiornato il suo codice per renderlo un po ‘più leggibile e poi pubblicato 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 a usare $('#test\\:abc')

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

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