DOM-Element anhand der ID suchen, wenn die ID eckige Klammern enthält?

77

Ich habe ein DOM-Element mit einer ID ähnlich:

something[500]

Das wurde von meiner Ruby on Rails-Anwendung erstellt. Ich muss in der Lage sein, dieses Element über jQuery abzurufen, damit ich mich durch das DOM bewegen kann, um das übergeordnete Element des übergeordneten Elements zu löschen, das eine variable ID hat, auf die ich vorher keinen Zugriff habe.

Weiß jemand, wie ich das machen könnte? Der folgende Code scheint nicht zu funktionieren:

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

Bei weiterer Prüfung Folgendes:

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

Gibt ein Objekt zurück, aber wenn ich ".html ()" oder ".text ()" darauf ausführe, ist das Ergebnis immer null oder nur eine leere Zeichenfolge.

— Mike Trpcic
quelle

2

Zusätzlich zur richtigen Antwort (dh, Sie müssen die Klammern mit doppelten Backslashes maskieren) sollten Sie wirklich next () anstelle mehrerer parent () -Aufrufe verwenden. Es ist sauberer und es ist weniger wahrscheinlich zu brechen, wenn sich ein Level ändert ... Wenn Sie also versuchen, das nächstgelegene Div zu erhalten, tun Sie .closest ('div') oder noch besser .closest ('div.meaningfulclassthatiwant')

— Paolo Bergantino

Vielen Dank für den Vorschlag, Paolo, aber wie ich bereits erwähnt habe, kenne ich die ID / Klasse des Elternteils, nach dem ich suche, nicht im Voraus, und da beide Elternteile Divs sind, würde der nächste nicht funktionieren. Trotzdem danke.

— Mike Trpcic

Ah, sorry, ich habe die Frage nicht gelesen, sondern nur den Titel und den Code darin angeschaut :) Ich denke, das dient mir ungefähr richtig.

— Paolo Bergantino

108

Sie müssen die eckigen Klammern entfernen, damit sie nicht als Attributselektoren gezählt werden. Versuche dies:

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

Siehe Sonderzeichen in Selektoren , insbesondere den zweiten Absatz:

Um eines der Metazeichen (z. B. !"#$%&'()*+,./:;<=>?@[\]^``{|}~) als wörtlichen Teil eines Namens zu verwenden, muss es mit zwei Backslashes maskiert werden : \\. Beispielsweise kann ein Element mit id="foo.bar"den Selektor verwenden $("#foo\\.bar"). Die W3C-CSS-Spezifikation enthält die vollständigen Regeln für gültige CSS-Selektoren . Ebenfalls nützlich ist der Blogeintrag von Mathias Bynens zu CSS-Zeichen-Escape-Sequenzen für Bezeichner .

— karim79
quelle

jQuery verfügt über eine integrierte Funktion: api.jquery.com/jQuery.escapeSelector ... zB: $ ("#" + $. EscapeSelector (ID)), wobei ID möglicherweise Sonderzeichen enthält

— dlo

12

Sie können auch tun

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

— dampfbetrieben
quelle

1

Meiner bescheidenen Meinung nach ist dies die beste Antwort, insbesondere wenn die ID vollständig dynamisch ist.

— Stackingjasoncooper

9

Eine ID darf keine eckigen Klammern enthalten. Es ist durch die Spezifikation verboten .

Einige Browser können Fehler korrigieren und verarbeiten, aber Sie sollten Ihre Daten korrigieren, anstatt zu versuchen, mit fehlerhaften Daten umzugehen.

— QUentin
quelle

Danke für den Link zur Spezifikation. Mir ist klar, dass es sich nicht um gültige IDs handelt, aber Rails fügt sie der Einfachheit halber im Controller hinzu.

— Mike Trpcic

1

Nicht nur Schienen - viele Web-Apps verwenden diesen Trick, da ein Formularhandler ein Array durchlaufen kann, anstatt eine Reihe von optionalen Zeilen zu erraten, die übermittelt wurden.

— Bryan Agee

@BryanAgee - ids sind keine names, und die meisten Formularhandlerbibliotheken verwenden das Zählen, um mehrere Steuerelemente mit demselben Namen zu durchlaufen, anstatt spezielle Namenskonventionen oder Wahrsagungen.

— Quentin

2

@BryanAgee - Nein, tut es nicht. Der Wert eines nameAttributs ist kein NAMEToken.

— Quentin

10

Ab HTML5 ist dies nicht mehr der Fall. w3.org/TR/html5/dom.html#the-id-attribute .

— Jiloc

9

Eckige Klammern haben für jQuery-Selektoren eine besondere Bedeutung , die Attributfilter speziell.

Entkomme einfach diesen und es wird dein Element gut finden

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

— Peter Bailey
quelle

4

Versuche dies:

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

— Tim S. Van Haren
quelle

3

Sie können ihnen mit entkommen \\oder Sie könnten so etwas tun ...

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

— Josh Stodola
quelle

3

"Alle Meta-Zeichen

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

Als wörtlicher Teil eines Namens muss er mit zwei umgekehrten Schrägstrichen versehen werden : \\.

Beispielsweise kann ein Element mit der ID = "foo.bar" den Selektor verwenden

$("#foo\\.bar")

"[source: jquery doc ] und ein Element mit id =" foo [bar] "(obwohl nicht für W3C gültig, aber von JQuery erkannt) können den Selektor verwenden

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

(Nur eine Antwort wie die vielen anderen, aber alle zusammen :))

— Elvis Ciotti
quelle