texto - change text jquery

Verifique si la clase ya fue asignada antes de agregar

Question

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

Por ejemplo:

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

En caso de duda si class baz ya ha sido asignado a la label , este sería el mejor enfoque:

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

o sería esto suficiente:

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

Answer 1

Esta pregunta captó mi atención después de otra marcada como duplicada de esta .

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

Está tratando de optimizar evitando una verificación innecesaria, a este respecto, 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, llame a Element.classList.add("collapse"); no agregará una clase de colapso adicional. No sé la implementación subyacente, pero supongo que debería ser lo suficientemente bueno.
2. JQuery realiza algunas comprobaciones necesarias en sus implementaciones addClass y removeClass (revisé el código fuente ). Para addClass , después de realizar algunas comprobaciones y si existe una clase, JQuery no intenta volver a agregarla. Del mismo modo para removeClass , JQuery hace algo a lo largo de la línea de cur.replace( " " + clazz + " ", " " ); que eliminará una clase solo si existe.

Digno de mención, JQuery hace algo de optimización en su implementación removeClass para evitar una nueva 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;
}
...

Por lo tanto, la mejor micro optimización posible podría ser con el objetivo de evitar los gastos generales de llamadas a funciones y las comprobaciones de implementación asociadas.

Digamos que quiere alternar una clase llamada collapse , si tiene el control total de cuándo se agrega o quita la clase, y si la clase de collapse está ausente inicialmente, 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;
        }
    };
})());

Como un lado, si está alternando una clase debido a cambios en la posición de desplazamiento, se recomienda throttle el manejo de eventos de desplazamiento.

Answer 2

Simplemente llame a addClass() . jQuery hará el control por ti. Si comprueba por su cuenta, está doblando el trabajo, ya que jQuery aún ejecutará el cheque por usted.

Answer 3

Un simple control en la consola le hubiera dicho que llamar a addClass varias veces con la misma clase es seguro.

Específicamente puedes encontrar el cheque en la fuente

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