Gestion des deux-points dans l'ID d'un élément avec jQuery

Question

Nous ne sommes pas en mesure d'accéder à l'élément div avec ID "test : abc" dans le code JS en utilisant jQuery.

<div id="test:abc">

$('#test:abc') 

Cela fonctionne bien sans colon. Nous n'avons pas de contrôle sur la génération de l'ID car il est généré automatiquement dans les sous-formulaires de Trinidad parce qu'il joint l'ID du sous-formulaire avec le signe : à chaque élément qu'il contient.

Answer 1

Vous devez échapper aux deux points en utilisant deux barres obliques inversées :

$('#test\\:abc')

Answer 2

Jetez un coup d'œil à ceci jsbin qui teste et compare la vitesse des méthodes de sélection d'ID avec des colons

vous devez ouvrir votre console firebug pour obtenir les résultats.

Je l'ai testé avec firefox 10 et jquery 1.7.2

En fait, j'ai fait une sélection 10'000 fois d'un div avec un deux-points dans l'id - avec les différentes méthodes pour y arriver. J'ai ensuite comparé les résultats avec une sélection d'ID sans deux-points, les résultats sont assez surprenants.

temps à gauche en ms méthode du sélecteur de droite

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

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

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

71 $("#nocolon")

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

notamment

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

c'est un peu une surprise

Answer 3

Il se bloque sur les deux points, évidemment, parce que jQuery essaie de les interpréter comme un sélecteur. Essayez d'utiliser le sélecteur d'attribut id.

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

Answer 4

Je voudrais juste utiliser document.getElementById et transmet le résultat à la fonction jQuery() fonction.

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

Answer 5

Utiliser deux backslash \\

DEMO

comme écrit ici

Si vous souhaitez utiliser l'un des ( tels que !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) comme partie littérale d'un nom. partie littérale d'un nom, vous devez échapper au caractère avec deux barres obliques inversées : \. Par exemple, si vous un élément avec id="foo.bar", vous pouvez utiliser pouvez utiliser le sélecteur $("#foo \.bar "). La spécification CSS du W3C contient la complète

Référence