Selectores de JQuery: cómo seleccionar un elemento con una clase específica * y * id

Question

Estoy intentando seleccionar un elemento HTML en mi página que tenga una clase e ID específicas. Aquí está la etiqueta:

<div class="statusLight" id="green"></div> 

He intentado esto sin suerte:

$statusLight = $('.statusLight#green'); 

Sé que yo podría simplemente decir

$statusLight = $('#green'); 

Pero yo estaba tratando de encontrar una forma para seleccionarla basado en su clase también. Cualquier ayuda sería apreciada.

Answer 1

Ambos #green.statusLight y .statusLight#green son selectores válidos y deben seleccionar el elemento que está buscando. El primero será más rápido sin embargo.

¿Está usando $(...) después de cargar el documento, es decir, desde $(document).ready(function() { ... }) o colocando el script después de su elemento?

Answer 2

No estoy del todo seguro de por qué querría hacer esto.

Una ID debe ser única, y por lo tanto cuando la seleccione, no hay necesidad de más especialización. Si no, entonces necesita modificar su HTML para hacerlo.

Este escenario solo tendría sentido si estuviera combinando un selector de clase con un selector de elementos, p.

$("div.statuslight") 

Pero en su ejemplo, no tiene sentido, ¡ya que tiene una identificación de todos modos!

Answer 3

¿Por qué debería seleccionar también en la clase? Los ID deben ser únicos, por lo que agregar la clase a eso no le compraría nada. Si solo usa ID, es más eficiente porque entonces jQuery solo puede usar el getElementByID nativo, que siempre es el más rápido. Mantenga sus consultas simples cuando pueda.

Answer 4

Otra razón por la que probablemente haría esto es si tiene un código genérico almacenado en caché buscando un Id específico, pero solo desea activarlo cuando tenga asignado un estilo específico. Especialmente cuando renderiza elementos MVC escamados donde los ID pueden estar en ciertas vistas, pero no desea que se tomen medidas, digamos ... campos de id "ocultos", pero en otras vistas estos pueden ser valores de búsqueda en un combo y tienen un complemento Seleccionar2 asignado ...

Answer 5

la forma más sencilla es:

$('.statusLight[id=green]');

a medida que el id es un atributo puede utilizar el selector de atributos

Answer 6

$(".class#id") o $("#id.class") será tanto trabajo.

Todos los comentarios en esta pregunta es que no hay ninguna razón para hacer esto ... puede que no exista un motivo de "mejores prácticas" para hacer esto con un programa bien diseñado, pero en el mundo real la mayoría de nosotros trabajamos en empresas que tienen bases de código que no están muy bien organizadas y si está trabajando en un gran programa de archivos de 10.000+, es posible que no desee reemplazar una identificación no descriptiva y al agregar una clase al selector puede ayudar a sus compañeros codificadores a entender de dónde vino el ID.

El caso en cuestión, yo trabajo en un proyecto en el que tenemos DIV contenedor que crean "widgets" en la página ... estos "widgets" se les da una identificación numérica de la base de datos, por lo que terminan con <div id="12345" class="widget"> de

Alguien más ha codificado la id ambigua mucho antes de trabajar aquí ... pero sigue siendo así. Cuando escribo JQuery, preferiría no confundir más el código ... así que en lugar de $("#12345") podría preferir $(".widget#12345") para que alguien no tenga que pasar media hora tratando de descubrir que el 12345 id en este escenario es para un widget.

Si bien $("#12345") y $(".widget#12345") selecciono lo mismo ... hace que el código sea mucho más legible para mis compañeros de trabajo y eso es más importante que una fracción de segundo en la mejora de velocidad para el javascript.

Answer 7

Sólo un seguimiento de su información:

Si usted está buscando para hacer referencia a un ID y una sub-clase (por ejemplo, el statusLight verde pero no el azul):

<div id="green"> 
    <div class="statusLight"></div> 
</div> 

<div id="blue"> 
    <div class="statusLight"></div> 
</div> 

Luego hay que añadir un espacio $("#green .statusLight")