2009-08-06 14 views
59

J'ai un élément DOM avec un ID similaire à:Trouver l'élément DOM par ID lorsque l'ID contient des crochets?

something[500] 

qui a été construit par mon application Ruby on Rails. Je dois pouvoir obtenir cet élément via jQuery afin de pouvoir parcourir le DOM pour supprimer le parent de son parent, qui a un ID de variable auquel je n'ai pas accès auparavant.

Est-ce que quelqu'un sait comment je pourrais m'y prendre? Le code suivant ne semble pas fonctionner:

alert($("#something["+id+"]").parent().parent().attr("id")); 

Après vérification, les éléments suivants:

$("#something["+id+"]") 

retourne un objet, mais quand je lance ".html()" ou » .text() ", le résultat est toujours nul ou juste une chaîne vide.

Toute aide serait grandement appréciée.

+2

en plus de la bonne réponse (qui est celle vous devez échapper à la parenthèses avec des antislashs doubles), vous devriez vraiment utiliser les plus proches() au lieu de plusieurs appels parent(). Il est plus propre et moins susceptible de se casser si un niveau arrive à changer ... Donc, si vous essayez d'obtenir le div le plus proche, vous faites .closest ('div') ou mieux encore .closest ('div.meaningfulclassthatiwant') –

+0

Merci pour la suggestion Paolo, mais comme je l'ai mentionné, je ne connais pas l'identité/classe du parent que je cherche à l'avance, et puisque les deux parents sont divs, le plus proche ne fonctionnerait pas. Merci quand même. –

+0

Ah, désolé, je n'ai pas lu la question juste regardé le titre et le code à l'intérieur :) Devinez qui me sert à peu près juste. –

Répondre

82

Vous devez échapper les crochets afin qu'ils ne soient pas comptés comme des sélecteurs d'attribut. Essayez ceci:

alert($("#something\\["+id+"\\]").parent().parent().attr("id")); 

See Special Characters In Selectors, en particulier le deuxième alinéa:

Pour utiliser une des méta-caractères (tels que !"#$%&'()*+,./:;<=>[email protected][\]^``{|}~) comme une partie littérale d'un nom, il doit être échappé avec des deux barres obliques inverses: \\. Par exemple, un élément avec id="foo.bar" peut utiliser le sélecteur $("#foo\\.bar"). La spécification CSS du W3C contient le complete set of rules regarding valid CSS selectors. Le blog de Mathias Bynens est également utile au CSS character escape sequences for identifiers.

+2

explication de caractère spécial (méta) est maintenant dans le deuxième paragraphe sur la page inidcated dans le post de karim79 –

+0

@KKirk - merci pour cela. – karim79

4

Essayez ceci:

alert($("#something\\["+id+"\\]").parent()[0].parent()[0].attr("id")); 
9

Les crochets ont une signification particulière pour jQuery selectors, l'attribut filtre spécifique.

échapper Juste ces derniers et il trouvera votre élément bien

$("#something\\[" + id + "\\]") 
9

Un id ne peut pas inclure entre crochets. C'est forbidden by the spec.

Certains navigateurs peuvent corriger et corriger les erreurs, mais vous devez corriger les données au lieu d'essayer de traiter les données incorrectes.

+0

Merci pour le lien vers la spécification. Je réalise qu'ils ne sont pas des ID valides, mais Rails les ajoute pour des raisons de commodité dans le contrôleur. –

+1

Non seulement les rails - de nombreuses applications Web utilisent cette astuce, car elle permet à un gestionnaire de formulaire de parcourir un tableau, plutôt que de deviner un certain nombre de lignes facultatives qui ont été soumises. –

+0

@BryanAgee - 'id's ne sont pas' name's, et la plupart des bibliothèques de gestionnaires de formulaires utilisent le comptage pour parcourir plusieurs contrôles avec le même nom plutôt que des conventions spéciales de nommage ou de divination. – Quentin

3

Vous pouvez leur échapper en utilisant \\ ou vous pourriez faire quelque chose comme ça ...

$(document.getElementById("something[" + id + "]")) 
7

Vous pouvez également faire

$('[id="something['+id+']"]') 
3

« Tous des méta-caractères

!"#$%&'()*+,./:;<=>[email protected][\]^`{|}~ 

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") 

"[source: jquery doc], et un élément avec id =" foo [bar] »(même mais pas valable pour le W3C, mais reconnu par JQuery), peut utiliser le sélecteur

$("#foo\\[bar\\]") 

(Juste un asnwer comme les beaucoup d'autres, mais tous ensemble :))

Questions connexes