Verifique si la clase ya está asignada antes de agregar


113

En jQuery, ¿se recomienda verificar si una clase ya está asignada a un elemento antes de agregar esa clase? ¿Tendrá algún efecto en absoluto?

Por ejemplo:

<label class='foo'>bar</label>

En caso de duda, si la clase bazya ha sido asignada label, ¿sería este el mejor enfoque?

var class = 'baz';
if (!$('label').hasClass(class)) {
  $('label').addClass(class);
}

o esto sería suficiente:

$('label').addClass('baz');

12
Usé .hasClasssolo cuando necesito verificar si la clase existe, si solo necesito asignar una clase, uso .addClass. jQuery no duplica las clases
Samich

7
Simplemente agregue la clase sin probar. Si ya existe, no se volverá a agregar.
Blazemonger

Respuestas:


177

Solo llama addClass(). jQuery hará la verificación por usted. Si verifica por su cuenta, está duplicando el trabajo, ya que jQuery aún ejecutará la verificación por usted.


47

Una simple comprobación en la consola le habría dicho que llamar addClassvarias veces con la misma clase es seguro.

Específicamente puedes encontrar el cheque en la fuente.

if ( !~setClass.indexOf( " " + classNames[ c ] + " " ) ) {
  setClass += classNames[ c ] + " ";
}

2
Por favor, vuelva a leer mi pregunta y notará que no se trata de ser seguro, sino de las mejores prácticas
Muleskinner

7
De su respuesta editada, veo que jQuery realmente verifica si la clase ya está asignada antes de agregarla, es decir, sería una mala práctica hacer la verificación usted mismo / gracias
Muleskinner

5
@Muleskinner eso es lo que estaba insinuando.
Raynos

41
@Raynos: Una simple verificación en la consola le habría dicho que llamar a addClass varias veces con la misma clase es seguro. Aún así, esta pregunta fue uno de los principales éxitos cuando busqué en Google una respuesta ... Incluso las cosas triviales que están bien documentadas en otros lugares tienen, en mi humilde opinión, un lugar en Stack Overflow.
eirirlar

10
Hay demasiada actitud en esta respuesta. Podría haberlo respondido con algo de tacto.
Dreadwail

4

Esta pregunta llamó mi atención después de otra que se marcó como un duplicado de esta .

Esta respuesta resume la respuesta aceptada con un pequeño detalle adicional.

Está tratando de optimizar evitando una verificación innecesaria, en este sentido, aquí hay factores que debe tener en cuenta:

  1. no es posible tener nombres de clase duplicados en el atributo de clase mediante la manipulación de un elemento DOM a través de JavaScript. Si tiene class="collapse"en su HTML, llamar Element.classList.add("collapse");no agregará una clase de colapso adicional . No conozco la implementación subyacente, pero supongo que debería ser lo suficientemente buena.
  2. JQuery hace algunas comprobaciones necesarias en sus addClassy removeClassimplementaciones (he comprobado el código fuente ). Porque addClass, después de hacer algunas comprobaciones y si existe una clase, JQuery no intenta agregarla nuevamente. De manera similar removeClass, JQuery hace algo en la línea de lo cur.replace( " " + clazz + " ", " " );cual eliminará una clase solo si existe.

Cabe destacar que JQuery hace algunas optimizaciones en su removeClassimplementación para evitar una re-renderización inútil. Dice así

...
// only assign if different to avoid unneeded rendering.
finalValue = value ? jQuery.trim( cur ) : "";
if ( elem.className !== finalValue ) {
    elem.className = finalValue;
}
...

Entonces, la mejor micro optimización que podría hacer sería con el objetivo de evitar los gastos generales de llamadas a funciones y las verificaciones de implementación asociadas.

Digamos que desea alternar una clase nombrada collapse, si tiene el control total de cuándo se agrega o quita la collapseclase , y si la clase está inicialmente ausente, entonces puede optimizar de la siguiente manera:

$(document).on("scroll", (function () {
    // hold state with this field
    var collapsed = false;

    return function () {
        var scrollTop, shouldCollapse;

        scrollTop = $(this).scrollTop();
        shouldCollapse = scrollTop > 50;

        if (shouldCollapse && !collapsed) {
            $("nav .branding").addClass("collapse");
            collapsed = true;

            return;
        }

        if (!shouldCollapse && collapsed) {
            $("nav .branding").removeClass("collapse");
            collapsed = false;
        }
    };
})());

Además, si está alternando una clase debido a cambios en la posición de desplazamiento, se recomienda encarecidamente que acelere el manejo del evento de desplazamiento.


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.