2009-08-06 16 views
59

Ho un elemento DOM con un ID simile a:Trova elemento DOM per ID quando l'ID contiene parentesi quadre?

something[500] 

che è stata costruita da mio Ruby on Rails applicazione. Devo essere in grado di ottenere questo elemento tramite jQuery in modo da poter attraversare il mio modo sul DOM per eliminare il genitore del suo genitore, che ha un ID variabile a cui non ho accesso in precedenza.

Qualcuno sa come potrei fare questo? Il seguente codice non sembra funzionare:

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

Ulteriori controlli in seguito, il seguente:

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

restituisce un oggetto, ma quando ho eseguito ".html()" o" .text() "su di esso, il risultato è sempre nullo o solo una stringa vuota.

Qualsiasi aiuto sarebbe molto apprezzato.

+2

In aggiunta alla risposta corretta (che è quella hai bisogno di sfuggire al parentesi con doppi backslash), dovresti usare veramente le chiamate a (più) (anziché a più genitore(). È più pulito e meno probabile che si interrompa se accade un cambiamento ... Quindi se stai cercando di ottenere il div più vicino fai più .closest ('div') o anche meglio .closest ('div.meaningfulclassthatiwant') –

+0

Grazie per il suggerimento Paolo, ma come ho detto non conosco l'ID/classe del genitore che sto cercando in anticipo, e poiché entrambi i genitori sono div, il più vicino non funzionerebbe. Grazie comunque. –

+0

Ah, scusate, non ho letto la domanda ho solo guardato il titolo e il codice in esso :) Indovina che mi serve giusto. –

risposta

82

È necessario sfuggire alle parentesi quadre in modo che non vengano conteggiati come selettori di attributo. Prova questo:

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

See Special Characters In Selectors, in particolare il secondo comma:

Per utilizzare uno dei meta-caratteri (come ad esempio !"#$%&'()*+,./:;<=>[email protected][\]^``{|}~) come una parte letterale di un nome, deve essere sfuggito con con due backslash: \\. Ad esempio, un elemento con id="foo.bar" può utilizzare il selettore $("#foo\\.bar"). La specifica CSS W3C contiene complete set of rules regarding valid CSS selectors. Utile anche il post di blog di Mathias Bynens su CSS character escape sequences for identifiers.

+2

La spiegazione del personaggio speciale (meta) è ora nel secondo paragrafo della pagina inidicato nel post di karim79 –

+0

@KKirk - grazie per questo. – karim79

4

Prova questo:

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

parentesi quadre hanno un significato speciale per jQuery selectors, l'attributo filtri appositamente.

Basta sfuggire a questi e troverà il vostro elemento multa

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

un ID non può includere le parentesi quadre. È forbidden by the spec.

Alcuni browser potrebbero correggere errori e far fronte, ma è necessario correggere i dati anziché cercare di gestire i dati non validi.

+0

Grazie per il link alle specifiche. Mi rendo conto che non sono ID validi, ma Rails li aggiunge per motivi di convenienza nel controller. –

+1

Non solo rotaie: molte applicazioni Web utilizzano questo trucco, poiché consente a un gestore di moduli di eseguire iterazioni attraverso una matrice, anziché di dividere un numero di righe facoltative che sono state inviate. –

+0

@BryanAgee - 'id's non sono' name's, e la maggior parte delle librerie di gestori di moduli usano il conteggio per iterare attraverso più controlli con lo stesso nome piuttosto che convenzioni di denominazione o divinazione speciali. – Quentin

3

Si può sfuggire utilizzando \\ o si potrebbe fare qualcosa di simile ...

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

Si può anche fare

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

"Qualsiasi dei meta-personaggi

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

come parte letterale di un nome, deve essere sfuggito con due barre rovesciate: \\.

Ad esempio, un elemento con id = "foo.bar", è possibile utilizzare il selettore

$("#foo\\.bar") 

"[fonte: jquery doc], e un elemento con id =" foo [bar]"(anche anche se non valido per il W3C, ma riconosciuto da JQuery), in grado di utilizzare il selettore

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

(Solo un asnwer, come molti altri, ma tutti insieme :))

Problemi correlati