Comment sélectionner des noeuds HTML par ID avec jquery lorsque l’ID contient un point?

Si mon HTML ressemblait à ceci:

   

Comment pourrais-je sélectionner # SearchBag.CompanyName avec JQuery? Je ne peux pas le faire fonctionner et je crains que ce soit le point qui casse tout. La chose ennuyeuse est que renommer tous mes identifiants serait beaucoup de travail, sans parler de la perte de lisibilité.

Remarque:
S’il vous plaît, ne commençons pas à parler de la façon dont les tables ne sont pas faites pour la mise en page. Je suis très conscient de la valeur et des lacunes de CSS et je m’efforce de l’utiliser autant que possible.

@Tomalak dans les commentaires:

Puisque les sélecteurs d’ID doivent être précédés d’un hachage #, il ne devrait y avoir aucune ambiguïté ici

“# Id.class” est un sélecteur valide qui nécessite à la fois un identifiant et une classe distincte à faire correspondre. c’est valable et pas toujours totalement redondant.

La bonne façon de sélectionner un littéral ‘.’ dans CSS est de lui échapper: “#id \ .moreid”. Cela causait des problèmes dans certains navigateurs plus anciens (en particulier IE5.x), mais tous les navigateurs de bureau modernes le prennent en charge.

La même méthode semble fonctionner dans jQuery 1.3.2, même si je ne l’ai pas testée à fond. quickExpr ne le prend pas en compte, mais l’parsingur de sélecteur plus impliqué semble réussir:

 $('#SearchBag\\.CompanyName'); 

Une variante serait la suivante:

 $("input[id='SearchBag.CompanyName']") 

Vous n’avez pas besoin d’échapper à quelque chose si vous utilisez document.getElementById :

 $(document.getElementById('strange.id[]')) 

getElementById suppose que l’entrée n’est qu’un atsortingbut id, le point ne sera donc pas interprété comme un sélecteur de classe.

Réponse courte : Si vous avez un élément avec id = "foo.bar" , vous pouvez utiliser le sélecteur $("#foo\\.bar")

Réponse plus longue : Ceci fait partie de la documentation de jquery – sélecteurs de section que vous pouvez trouver ici: http://api.jquery.com/category/selectors/

Votre question reçoit une réponse dès le début de la documentation:

 Si vous souhaitez utiliser l'un des méta-caractères (tels que 
 ! "# $% & '() * +,. /:;? @ [\] ^` {|} ~) 
 en tant que partie littérale d'un nom, vous devez échapper au personnage 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 du W3C contient 
 l'ensemble complet des règles concernant les sélecteurs CSS valides.  Aussi utile est le 
 entrée de blog par Mathias Bynens sur les séquences d'échappement de caractères CSS pour les identificateurs.

La sélection d’atsortingtion semble être appropriée lorsque votre identifiant se trouve dans une variable:

 var id_you_want='foo.bar'; $('[id="' + id_you_want + '"]'); 

Ceci est documenté dans l’ API des sélecteurs jQuery :

Pour utiliser l’un des méta-caractères (comme !"#$%&'()*+,./:;<=>?@[\]^`{|}~ ) En tant que partie littérale d’un nom, il doit être échappé avec deux barres obliques inverses: \\ Par exemple, un élément avec id="foo.bar" , peut utiliser le sélecteur $("#foo\\.bar") .

En bref, préfixez le . avec \\ .

 $('#SearchBag\\.CompanyName') 

Le problème est que . correspondra à une classe, donc $('#SearchBag.CompanyName') correspondra à

. Le échappé avec \\. sera traité comme une normale . sans signification particulière, correspondant à l’identifiant souhaité.

Ceci s’applique à tous les caractères !"#$%&'()*+,./:;<=>?@[\]^`{|}~ Qui auraient autrement une signification particulière en tant que sélecteur dans jQuery.

Les gars qui recherchent une solution plus générique, j’ai trouvé une solution qui insère une barre oblique avant les caractères spéciaux, ce qui résout les problèmes liés à la récupération du nom et de l’ID d’un div qui contient des caractères spéciaux.

“Str1.str2% str3” .replace (/ [^ \ w \ s] / gi, ‘\\ $ &’)

renvoie “Str1 \\. str2 \\% str3”

J’espère que c’est utile!

Vous pouvez utiliser un sélecteur d’atsortingbut:

 $("[id='SearchBag.CompanyName']"); 

Ou vous pouvez spécifier le type d’élément:

 $("input[id='SearchBag.CompanyName']");