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

Question

Si mon html ressemblait à ça :

<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 n'arrive pas à le faire fonctionner et j'ai peur que ce soit le point qui casse tout. Ce qui est ennuyeux, c'est que renommer tous mes identifiants représenterait beaucoup de travail, sans parler de la perte de lisibilité.

Note :
Ne commençons pas à dire que les tables ne sont pas faites pour la mise en page. Je suis très conscient de la valeur et lacunes des CSS et essayez de l'utiliser autant que possible.

Answer 1

@Tomalak dans les commentaires :

comme les sélecteurs d'ID doivent être précédés d'un dièse #, il ne devrait pas y avoir d'ambiguïté ici

"#id.class" est un sélecteur valide qui nécessite à la fois un id et une classe distincte pour correspondre ; c'est valide et pas toujours totalement redondant.

La manière correcte de sélectionner un '.' littéral dans une CSS est de l'échapper : "#id \.moreid ". Cela posait des problèmes dans certains anciens navigateurs (en particulier IE5.x), mais tous les navigateurs de bureau modernes le supportent.

La même méthode semble fonctionner dans jQuery 1.3.2, bien que je ne l'aie pas testée de manière approfondie ; quickExpr ne le détecte pas, mais l'analyseur de sélection plus complexe semble le faire correctement :

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

Answer 2

Une variante serait la suivante :

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

Answer 3

Après avoir vu tant de questions signalées comme étant des doublons de celle-ci, il pourrait être utile de disposer d'une solution robuste :

$(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. De plus, c'est plus rapide que $('#strange\\.id\\[\\]') qui appellera getElementById en interne.

Answer 4

Cela fait partie de la documentation jquery - sélecteurs de section que vous pouvez trouver ici : http://api.jquery.com/category/selectors/

La réponse à votre question se trouve en fait au début de la documentation :

If you wish to use any of the meta-characters ( such as 
!"#$%&'()\*+,./:;?@\[\\\]^\`{|}~ ) 
as a literal part of a name, you must escape the character with 
two backslashes: \\\\. For example, if you have an element with id="foo.bar", 
you can use the selector $("#foo\\\\.bar"). The W3C CSS specification contains 
the complete set of rules regarding valid CSS selectors. Also useful is the 
blog entry by Mathias Bynens on CSS character escape sequences for identifiers.

Answer 5

Pour ceux qui cherchent une solution plus générique, j'ai trouvé une solution qui insère une barre oblique inversée avant tout caractère spécial, ce qui résout les problèmes liés à la récupération du nom et de l'ID d'une division contenant des caractères spéciaux.

"Str1.str2%str3".replace(/[^ ^ \w\s ]/gi, ' \\ $&')

renvoie "Str1 \\.str2\\ %str3"

J'espère que cela vous sera utile !