2009-08-06 15 views
59

Ich habe ein DOM-Element mit einer ID ähnlich wie:DOM-Element nach ID suchen, wenn ID eckige Klammern enthält?

something[500] 

, die durch meine Ruby on Rails-Anwendung gebaut wurde. Ich muss in der Lage sein, dieses Element über jQuery zu bekommen, so dass ich den DOM nach oben gehen kann, um das Elternteil seines Elternteils zu löschen, das eine Variablen-ID hat, auf die ich vorher keinen Zugriff hatte.

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

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

Bei einer weiteren Untersuchung, die folgenden:

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

ein Objekt zurückgibt, aber wenn ich ".html()" oder“.text laufen() "Das Ergebnis ist immer Null oder nur eine leere Zeichenfolge.

Jede Hilfe würde sehr geschätzt werden.

+2

Neben der richtigen Antwort (das ist, dass Du musst dem entkommen Klammern mit doppelten Backslashes), sollten Sie engste() statt mehrere Parent() -Aufrufe verwenden. Es ist sauberer und weniger wahrscheinlich zu brechen, wenn sich ein Level ändert ... Wenn Sie also versuchen, das nächste div zu bekommen, tun Sie .closest ('div') oder noch besser .closest ('div.meaningfulclasts thatiwant') –

+0

Danke für den Vorschlag Paolo, aber wie ich erwähnt habe, kenne ich nicht die ID/Klasse des Elternteils, nach dem ich im Voraus suche, und da beide Eltern divs sind, würde das nächste nicht funktionieren. Trotzdem danke. –

+0

Ah, Entschuldigung, ich habe die Frage nicht gelesen, nur den Titel und den darin enthaltenen Code angeschaut :) Schätze das mir recht behilflich ist. –

Antwort

82

Sie müssen die eckigen Klammern verlassen, damit sie nicht als Attributselektoren gezählt werden. Versuchen Sie folgendes:

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

See Special Characters In Selectors, speziell den zweiten Absatz:

Um eine der Meta-Zeichen (wie !"#$%&'()*+,./:;<=>[email protected][\]^``{|}~) als wörtliche Teil eines Namens, muss es maskiert werden mit mit zwei Backslashes: \\. Zum Beispiel kann ein Element mit id="foo.bar" den Selektor $("#foo\\.bar") verwenden. Die W3C-CSS-Spezifikation enthält die complete set of rules regarding valid CSS selectors. Hilfreich ist auch der Blogeintrag von Mathias Bynens unter CSS character escape sequences for identifiers.

+2

spezielle (Meta) Zeichen Erklärung ist jetzt im zweiten Absatz auf der Seite in Karim79 Post –

+0

@KKirk eingeweiht - vielen Dank dafür. – karim79

4

Try this:

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

Eckige Klammern haben eine besondere Bedeutung zu jQuery selectors filtert das Attribut speziell.

Gerade diese entkommen und es wird Ihr Element feinen

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

Ein id kann nicht umfassen eckigen Klammern finden. Es ist forbidden by the spec.

Einige Browser können Fehler korrigieren und bewältigen, aber Sie sollten Ihre Daten korrigieren, anstatt mit schlechten Daten zu arbeiten.

+0

Danke für den Link zur Spezifikation. Ich merke, dass sie keine gültigen IDs sind, aber Rails fügt sie der Einfachheit halber in den Controller ein. –

+1

Nicht nur Rails - viele Web-Apps verwenden diesen Trick, da sie es einem Form-Handler erlauben, durch ein Array zu iterieren, anstatt eine Anzahl optionaler Zeilen zu generieren, die gesendet wurden. –

+0

@BryanAgee - 'id' sind nicht 'name's, und die meisten Form-Handler-Bibliotheken verwenden das Zählen, um mehrere Steuerelemente mit demselben Namen statt spezieller Benennungskonventionen oder Wahrsagen zu iterieren. – Quentin

3

Sie können sie entkommen mit \\ oder man könnte so etwas tun ...

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

Sie können tun, auch

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

„Jede der Meta-Zeichen

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

Als literaler Teil eines Namens muss es mit zwei umgekehrten Schrägstrichen mit Escapezeichen versehen werden: \\.

beispielsweise ein Element mit id = "foo.bar" kann den Selektor

$("#foo\\.bar") 

"[Quelle: jquery doc], und ein Element mit id =" foo [bar]“(auch wenn auch nicht für W3C gültig, aber anerkannt von JQuery) kann den

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

(einfach eine asnwer wie die vielen anderen, aber alle zusammen :))