Question Comment sélectionner des noeuds 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 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 commencez 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 lacunes du CSS et s'efforce de l'utiliser autant que possible.


163
2018-03-03 09:03


origine


Réponses:


@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 séparée. c'est valable et pas toujours totalement redondant.

La manière correcte de sélectionner un littéral '.' Dans CSS consiste à 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 en compte, mais l'analyseur de sélecteur plus impliqué semble réussir:

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

197
2018-03-03 10:09



Une variante serait la suivante:

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

111
2018-03-03 09:08



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 attribut id, le point ne sera donc pas interprété comme un sélecteur de classe.


26
2018-06-06 05:33



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.

16
2017-08-02 12:37



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

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

8
2017-09-19 20:53



Ceci est documenté dans le API des sélecteurs jQuery:

Pour utiliser les méta-caractères (tels que    !"#$%&'()*+,./:;<=>?@[\]^`{|}~) 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') correspondrait <div id="SearchBag" class="CompanyName">. Les échappés avec \\. sera traité comme un normal . sans signification particulière, correspondant à l'identifiant souhaité.

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


4
2018-02-04 11:49



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!


2
2017-08-04 18:02



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']");

2
2018-03-13 23:52