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]') .