2009-08-06 12 views
59

que tienen un elemento DOM con una identificación similar a:Buscar el elemento DOM por ID cuando el ID contiene corchetes?

something[500] 

que fue construido por mi Ruby on Rails aplicación. Necesito poder obtener este elemento a través de jQuery para poder recorrer el DOM para eliminar el padre de su padre, que tiene una identificación variable a la que no tengo acceso de antemano.

¿Alguien sabe cómo podría hacerlo? El siguiente código no parece estar funcionando:

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

Tras una posterior inspección, los siguientes:

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

devuelve un objeto, pero cuando corro ".html()" o" .text() "en él, el resultado es siempre nulo o solo una cadena vacía.

Cualquier ayuda sería muy apreciada.

+2

Además de la respuesta correcta (que es el necesitas escapar de la corchetes con barras invertidas dobles), realmente debería usar las llamadas más cercanas() en lugar de las múltiples paternidad(). Es más limpio y es menos probable que se rompa si un nivel cambia ... Por lo tanto, si intentas obtener el div más cercano, lo haces .closest ('div') o incluso mejor .closest ('div.meaningfulclassthatiwant') –

+0

Gracias por la sugerencia de Paolo, pero como mencioné antes, no sé la ID/clase del padre que estoy buscando, y dado que ambos padres son divs, el más cercano no funcionaría. Gracias sin embargo. –

+0

Ah, lo siento, no leí la pregunta, solo miré el título y el código :) Adivina que me sirve. –

Respuesta

82

Debe escapar de los corchetes para que no se tengan en cuenta como selectores de atributos. Prueba esto:

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

See Special Characters In Selectors, específicamente el segundo párrafo:

Para utilizar cualquiera de los meta-caracteres (tales como !"#$%&'()*+,./:;<=>[email protected][\]^``{|}~) como una parte literal de un nombre, hay que escapó con la dos barras diagonales inversas: \\. Por ejemplo, un elemento con id="foo.bar", puede usar el selector $("#foo\\.bar"). La especificación CSS de W3C contiene el complete set of rules regarding valid CSS selectors. También es útil la entrada de blog de Mathias Bynens en CSS character escape sequences for identifiers.

+2

explicación especial de caracteres (meta) está ahora en el segundo párrafo de la página inidcated en la publicación de karim79 –

+0

@KKirk - gracias por eso. – karim79

4

Prueba esto:

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

corchetes tienen un significado especial para jQuery selectors, el atributo filtra específicamente.

Sólo escapar de estos y que se encuentra su elemento fina

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

un ID no puede incluir entre corchetes. Es forbidden by the spec.

Algunos exploradores pueden tener errores para corregir y hacer frente, pero debe corregir los datos en lugar de tratar de manejar los datos incorrectos.

+0

Gracias por el enlace a la especificación. Me doy cuenta de que no son identificadores válidos, pero Rails los agrega por conveniencia en el controlador. –

+1

No solo raíles: muchas aplicaciones web utilizan este truco, ya que permite que un manejador de formularios itere a través de una matriz, en lugar de adivinar un número de filas opcionales que se han enviado. –

+0

@BryanAgee - 'id's no son' name's, y la mayoría de las bibliotecas de manejadores de formularios usan el conteo para iterar a través de múltiples controles con el mismo nombre en lugar de convenciones especiales de nombres o adivinación. – Quentin

3

Puede escapar de ellos utilizando \\ o usted podría hacer algo como esto ...

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

También se puede hacer

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

"Cualquiera de los meta-caracteres

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

como una parte literal de un nombre, se debe escapar con dos barras diagonales inversas: \\.

Por ejemplo, un elemento con id = "foo.bar", puede utilizar el selector

$("#foo\\.bar") 

"[Fuente: jquery doc], y un elemento con id =" foo [bar]"(incluso aunque no es válida para el W3C, pero reconocido por jQuery), puede utilizar el selector

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

(Sólo un asnwer como los muchos otros, pero todos juntos :))

Cuestiones relacionadas