jQuery: seleccione la clase y la identificación de un elemento al mismo tiempo?

170

Tengo algunos enlaces que quiero seleccionar clase e identificación al mismo tiempo.

Esto se debe a que tengo 2 comportamientos diferentes. Cuando una clase de enlaces tiene un nombre de clase, se comportan de una manera, cuando el mismo grupo de enlaces obtiene otro nombre de clase, se comportan de manera diferente. Los nombres de clase se cambian con jquery.

Así que tengo que poder seleccionar una clase de enlaces Y una identificación al mismo tiempo. es posible?

He intentado:

 $("a .save #country")

sin ningún resultado

jquery dom jquery-selectors css-selectors ajsie
fuente

Respuestas:

305

Tu puedes hacer:

$("#country.save")...

O

$("a#country.save")...

O 

$("a.save#country")...

como tu prefieras.

Entonces, sí, puede especificar un selector que tenga que coincidir con el ID y la clase (y potencialmente el nombre de la etiqueta y cualquier otra cosa que desee incluir).

cletus
fuente
41
Entonces, básicamente es como: $ ("# a .b") significa elemento con clase b dentro del elemento con id a. $ ("# ab") significa elemento con clase b e id a. El truco es el espacio entre #A y .b
Bhumi Singhal
13
Debe tener cuidado de usar el selector de identificación antes de la clase, de lo contrario no funcionará. Ejemplo: $ (". Save # country") ... no devuelve resultados.
slotomo
43

Solo para agregar que la respuesta que Alex proporcionó funcionó para mí, y no la que se destaca como respuesta.

Este no me funcionó 

$('#country.save')

Pero este sí: 

$('#country .save')

entonces mi conclusión es usar el espacio. Ahora no sé si se trata de la nueva versión de jQuery que estoy usando (1.5.1), pero de todos modos espero que esto ayude a cualquier persona con un problema similar que he tenido.

editar: crédito completo para la explicación (en el comentario a la respuesta de Alex) va a Felix Kling quien dice:

El espacio es el selector descendente, es decir, AB significa "Hacer coincidir todos los elementos que coinciden con B que son descendientes de elementos que coinciden con A". AB significa "seleccionar todos los elementos que coincidan con A y B". Por lo tanto, realmente depende de lo que quieras lograr. #country.savey #country .saveno son equivalentes

Nikola
fuente
2
¿Es el problema que dijiste "contador" en lugar de "país"?
amindfv
8

Funcionará al agregar espacio entre la identificación y el identificador de clase

$("#countery .save")...

Alex
fuente
1
en realidad esto funcionó para mí, ya que no funcionaba como $ ('# countery.save'), ¡así que gracias!
Nikola
1
He descubierto que a veces es exigente con el espacio. como $ (. selector> .item # id) funciona, pero $ (. selector> .item #id) no funciona.
Abe Petrillo
21
El espacio es el selector descendente , es decir, A Bsignifica "Hacer coincidir todos los elementos que coinciden con B que son descendientes de elementos que coinciden con A". ABsignifica "seleccionar todos los elementos que coincidan con A y B". Por lo tanto, realmente depende de lo que quieras lograr. #countery.savey #countery .saveno son equivalentes
Felix Kling
2

Al final se aplican las mismas reglas que para CSS.

Así que creo que esta referencia podría ser de alguna utilidad valiosa.

escapada
fuente
¿Podría resumir el contenido de su referencia?
krlmlr
En realidad, de acuerdo con api.jquery.com/category/selectors jQuery tiene algunos selectores propios; Además, en realidad no dice que todos los selectores CSS 1-3 sean compatibles ...
SamB
@SamB Tienes razón, pero dice que toma prestado de CSS 1-3 Y agrega el suyo. Todavía creo que el enlace a las cosas del W3C es válido para esta discusión.
akousmata
2

¿Qué tal este código?

$("a.save#country")
Pekka
fuente
1 
$("a.save, #country")

seleccionará tanto la clase "a.save" como la identificación del "país".

OK W
fuente