Estoy tratando de seleccionar un elemento HTML en mi página que tiene una clase específica y de IDENTIFICACIÓN. Aquí está la etiqueta:

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

He intentado sin suerte:

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

Sé que podría decir simplemente

$statusLight = $('#green');

Pero yo estaba tratando de encontrar una manera de seleccionar en base a su clase. Cualquier ayuda se agradece.

¿Por qué desea seleccionar por clase si sabe el ID? Por diseño, los ID son únicos, por lo tanto, esta sería la manera más rápida para seleccionar un elemento.
Yo no lo entiendo. El identificador debe ser ÚNICO y final de todos los filtros. Aplicar nada de lo + id debe ser exactamente el mismo que seleccionar sólo por ID. ¿Por qué querríamos hacer esto?
En cualquier caso, estoy bastante seguro de jQuery se detiene cuando encuentra la primera instancia de un selector con un ID, haciendo diferenciación de clases de Identificadores duplicados imposible.
Una razón para esto puede ser que la clase del elemento cambia y se quiere seleccionar elemento sólo cuando se ha dado clase. (Ok, sólo una suposición, pero el punto es que no puede ser una razón para esto).
«Estoy bastante seguro de jQuery se detiene cuando encuentra la primera instancia de un selector con un ID» — espero y creo que esto no es cierto, ya que ello iría en contra de un punto de selector CSS — todas las partes del selector debe coincidir, no sólo ID. ¿Qué pasa si usted está interesado sólo en el elemento cuando se tiene cierta clase? La optimización de su rompería este comportamiento.

OriginalEl autor BAHDev | 2010-01-07

7 Comentarios

  1. 18

    Tanto #green.statusLight y .statusLight#green son válidos los selectores y debe seleccionar el elemento que está buscando. Primero será más rápido aunque.

    Están utilizando $(...) después de que el documento es cargado, es decir, de $(document).ready(function() { ... }) o mediante la colocación de su secuencia de comandos después de su elemento?

    Gracias Pedro por la rápida respuesta. Que en realidad terminó siendo un error tipográfico con «Luz» en lugar de «luz». Ambos métodos se dio terminó trabajando.

    OriginalEl autor Peter Štibraný

  2. 11

    No estoy del todo seguro de por qué usted quiere hacer esto.

    Un IDENTIFICADOR debe ser único, y por lo tanto, cuando se selecciona, no hay necesidad para cualquier especialización. Si no, entonces usted necesidad de modificar el código HTML para hacerlo.

    Este escenario sólo tendría sentido si se combina un selector de clase con un elemento selector, por ejemplo,

    $("div.statuslight")

    Pero en tu ejemplo, no hay un punto, ya tienes un ID de todos modos!

    James, estoy de acuerdo con usted. En realidad más de una legibilidad cosa en mi código, pero tienes razón.. todos los Identificadores son únicos de todos modos, así que ¿por qué tiene que filtrar más? Mi problema terminó siendo un error tipográfico por el camino..
    No es el caso en el que desea hacer el evento de la delegación en un elemento sólo cuando se tiene una clase. Digamos que tienes una arrastrar y soltar el elemento y solo quieres que se puede hacer clic cuando se ha dado una cierta clase (a través de algún tipo de interacción).

    OriginalEl autor James Wiseman

  3. 3

    ¿Por qué usted necesita para seleccionar en la clase así? Id debe ser único para agregar la clase a la que no volvería a comprar nada. Si usted sólo tiene que utilizar el ID es más eficiente porque entonces jQuery puede usar el nativo getElementByID que es siempre el más rápido. Mantenga sus consultas simple cuando se puede.

    Estoy de acuerdo. Esto es más de una legibilidad cosa en mi código en lugar de una necesidad funcional. Gracias por el consejo.
    Una razón para esto puede ser que la clase del elemento cambia y se quiere seleccionar elemento sólo cuando se ha dado clase. (Ok, sólo una suposición, pero el punto es que no puede ser una razón para esto). [repetir el mismo comentario anterior]

    OriginalEl autor Parrots

  4. 3

    $(".class#id") o $("#id.class") funcionará.

    Todos los comentarios en esta pregunta es que no hay ninguna razón para hacer esto… no puede ser una de las «mejores prácticas» de la razón 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 son muy bien organizado y si usted está trabajando en un gran 10000+ archivo de programa, es posible que no desee sustituir a un no-descriptivo de identificación y mediante la adición de una clase para el selector usted puede ayudar a sus compañeros de los codificadores de entender que el id de vino.

    Caso en punto, yo trabajo en un proyecto en el que hemos contenedor de DIVs que crear «widgets» en la página… estos «aparatos» se les da un id numérico de la base de datos, así terminamos con <div id="12345" class="widget">

    Alguien codificado por la ambigüedad de la identificación de un largo tiempo antes de que yo trabajaba aquí… pero sigue siendo. Cuando escribo JQuery, prefiero no hacer más de un lío de el código… así que en lugar de $("#12345") me podría preferir $(".widget#12345") para que alguien que no tiene que gastar una media hora tratando de averiguar que el 12345 id en este escenario es de un widget.

    Así, mientras $("#12345") y $(".widget#12345") seleccione la misma cosa… se me hace que el código 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 la velocidad de javascript.

    De hecho! Otro caso de uso, estoy usando comodines en mi selector de ID [id^=lightbox_flex_field_flex_field_] y la necesidad de obtener la clase también en algunos casos para diferenciar ya que los usuarios pueden definir los tipos de campo de sí mismos…

    OriginalEl autor user1610157

  5. 1

    Sólo un seguimiento FYI:

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

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

    Entonces usted necesita para añadir un espacio $("#green .statusLight")

    OriginalEl autor Angus Walker

  6. 0

    Otra razón por la que usted probablemente va a hacer esto es que si usted ha almacenado en caché código genérico buscando un Id específico, pero sólo desea activar cuando se tiene un estilo específico asignado. Especialmente cuando la representación scafolded MVC elementos donde IDs pueden ser en ciertos puntos de vista, pero no desea que se tomen acciones en, digamos… «hidden» id de los campos, pero en otros puntos de vista que estos pueden ser valores de búsqueda en un combo y tiene un Select2 complemento asignado…

    OriginalEl autor Brian Kirkpatrick

  7. 0

    La forma más sencilla es:

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

    Como el id es un atributo puede utilizar el selector de atributo

    OriginalEl autor Thermech

Dejar respuesta

Please enter your comment!
Please enter your name here