Utilisation de Javascript/jQuery pour accéder aux éléments HTML avec un attribut ID incorrect

Question

Je crée un script Greasemonkey pour que quelqu'un modifie l'affichage de certains des champs que leur CRM (Zoho) a créés parce qu'ils n'ont pas accès pour changer le rendu HTML

Cela devrait être facile, mais Zoho a décidé que la création d'une bonne HTML était trop grand une douleur dans le cul, je suppose, et leur code HTML contient des choses comme ceci:

<input type="text" maxlength="50" style="width: 100%;" class="textField" id="property(Phone)" name="property(Phone)"/> 

L'ID de contenir des espaces et des parenthèses, qui ne sont pas valides dans les attributs ID, et m'empêche d'utiliser document.getElementById() pour les sélectionner ou d'utiliser jQuery pour les sélectionner.

Est-ce que quelqu'un a des idées pour savoir comment saisir cet élément? Évidemment, je pourrais l'attraper via son index dans son élément parent, ou en traversant le DOM, mais cela signifierait que si l'ordre des champs changeait, le script Greasemonkey cesserait de fonctionner correctement car il ciblerait alors les mauvais éléments .

Answer 1

Vous pouvez échapper aux espaces et parenthèses en utilisant des barres obliques inverses:

$('#property\\(Phone\\)').val('jQuery selected property(Phone)!'); 
$('#ab\\ cd\\ ef').val('jQuery selected ab cd ef!'); 

Answer 2

Vous pouvez toujours faire un document.getElementsByTagName ('entrée'), puis parcourir les résultats et le faire correspondre avec ses attributs (comme son type et son nom, sa classe ...). Pas très efficace, mais la seule façon que je connaisse qui fonctionne avec un ordre (puisque l'identifiant est invalide) ...

var inputs = document.getElementsByTagName('input'); 
if (inputs) 
    for (var i = 0; i < inputs.length; i++) 
     if (inputs[i].type == 'text' && inputs[i].name == 'SearchValue') 
      return inputs[i]; 

Je suis sûr JQuery (ou tout autre cadre) ont un équivalent à cette snippet ...

Answer 3

JQuery ne peut probablement pas le trouver en utilisant la syntaxe #id, mais pourrait probablement le trouver en utilisant tagName [id = valeur] syntaxe ... essayez-le, et bonne chance. Voir le jQuery doc.

Answer 4

Dans quel navigateur est-ce? Firefox, je suppose, puisque vous mentionnez GreaseMonkey. Mais document.getElementById("property(Phone)") semble fonctionner correctement dans Firefox 3.5.

Answer 5

Vous pouvez échapper aux crochets comme ceci:

$("#property\\(Phone\\)")