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

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

<div id="test:abc">

$('#test:abc') 

Cela fonctionne bien sans deux-points. Nous n'avons pas de contrôle sur la génération d'ID car elle est générée automatiquement dans les sous-formulaires de Trinidad car elle attache l'ID de sous-formulaire :à chaque élément à l'intérieur.

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

$('#test\\:abc')

En bref

$(document.getElementById("test:abc")) est ce que vous devez utiliser.

Explication : Hormis le gain de vitesse (voir plus bas), il est plus facile à manipuler.

Exemple: disons que vous avez une fonction

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

Vitesse / synchronisation

jetez un œil à ce jsbin qui teste et compare la vitesse des méthodes de sélection des identifiants avec les deux-points

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

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

en gros, 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 parvenir. Ensuite, j'ai comparé les résultats à une sélection d'identification sans deux points, les résultats sont assez surprenants.

temps gauche en ms méthode du sélecteur droit

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

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

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


71 $("#nocolon")

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

surtout

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

vient un peu comme une surprise

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

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

Je voudrais simplement utiliser document.getElementByIdet transmettre le résultat à la jQuery()fonction.

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

utiliser deux antislash \\

DEMO

comme écrit ici

Si vous souhaitez utiliser l'un des méta-caractères (comme! "# $% & '() * +,. / :; <=>? @ [] ^` {|} ~) Comme partie littérale d'un name, vous devez échapper le caractère avec deux barres obliques inverses: \. Par exemple, si vous avez un élément avec id = "foo.bar", vous pouvez utiliser le sélecteur $ ("# foo \ .bar"). La spécification CSS W3C contient le complet

Référence

En me référant à la réponse de Toskan, j'ai mis à jour son code pour le rendre un peu plus lisible, puis je l'ai affiché sur la page.

Voici le lien jbin: http://jsbin.com/ujajuf/14/edit .



De plus, je l'ai exécuté avec plus d'itérations

Iterations:1000000

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

Encore plus:

Iterations:10000000

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

essayez d'utiliser $('#test\\:abc')

Cette syntaxe a $('[id="test:abc"]') fonctionné pour moi. J'utilise Netbeans 6.5.1et il génère des composants avec un idqui contient un fichier : (colon). J'ai essayé le \\et le \3Amais aucun d'entre eux n'a fonctionné.

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