Comment sélectionner des nœuds html par ID avec jquery lorsque l'ID contient un point?

Si mon html ressemblait à ceci:

<td class="controlCell">
    <input class="inputText" id="SearchBag.CompanyName" name="SearchBag.CompanyName" type="text" value="" />
</td>

Comment puis-je sélectionner # SearchBag.CompanyName avec JQuery? Je ne peux pas le faire fonctionner et j'ai peur que ce soit le point qui brise tout. Le plus ennuyeux est que renommer tous mes identifiants serait beaucoup de travail, sans parler de la perte de lisibilité.

Remarque:
veuillez ne pas commencer à parler du fait que les tableaux ne sont pas conçus pour la mise en page. Je suis très conscient de la valeur et des lacunes du CSS et j'essaie de l'utiliser autant que possible.

@Tomalak dans les commentaires:

comme les sélecteurs d'ID doivent être précédés d'un hash #, 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 pour correspondre; c'est valide et pas toujours totalement redondant.

La bonne façon de sélectionner un littéral «.» en CSS est d'y é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, mais l'analyseur de sélecteur le plus impliqué semble bien faire les choses:

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

Une variante serait la suivante:

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

Vous n'avez besoin d'échapper à rien si vous utilisez document.getElementById:

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

getElementById suppose que l'entrée est juste un attribut id, donc le point ne sera 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 : Cela fait partie de la documentation jquery - sélecteurs de section que vous pouvez trouver ici: http://api.jquery.com/category/selectors/

Votre question est répondue dès le début de la documentation:

Si vous souhaitez utiliser l'un des méta-caractères (tels que 
! "# $% & '() * +,. /:;? @ [\] ^` {|} ~) 
comme partie littérale d'un nom, vous devez échapper au caractère avec 
deux contre-obliques: \\. 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
l'ensemble complet de règles concernant les sélecteurs CSS valides. Le
article de blog de Mathias Bynens sur les séquences d'échappement de caractères CSS pour les identificateurs.

La sélection attr semble appropriée lorsque votre identifiant est 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 les méta-caractères ( par exemple !"#$%&'()*+,./:;<=>?@[\]^`{|}~) comme une 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 .cela correspondra à une classe, donc $('#SearchBag.CompanyName')correspondrait <div id="SearchBag" class="CompanyName">. L'échappée avec \\.sera traitée comme une valeur normale .sans signification particulière, correspondant à l'ID que vous désirez.

Cela 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 arrière avant tout caractère spécial, cela résout les problèmes liés à la récupération du nom et de l'ID d'un div contenant 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'attribut:

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

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

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