it-swarm.it

Controlla se la classe è già stata assegnata prima di aggiungere

In jQuery, è consigliabile verificare se una classe è già assegnata a un elemento prima di aggiungere quella classe? Avrà anche qualche effetto?

Per esempio:

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

In caso di dubbi se la classe baz è già stata assegnata a label, questo sarebbe l'approccio migliore:

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

o sarebbe abbastanza:

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

Basta chiamare addClass(). jQuery farà il controllo per te. Se controlli da solo, stai raddoppiando il lavoro, dal momento che jQuery eseguirà ancora eseguirà il controllo per te.

161
jmar777

Un semplice controllo nella console ti avrebbe detto che chiamare addClass più volte con la stessa classe è sicuro.

Nello specifico puoi trovare il check-in la fonte

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

Questa domanda ha attirato la mia attenzione su un'altra che è stata contrassegnata come duplicato di questo .

Questa risposta riassume la risposta accettata con un piccolo dettaglio aggiunto.

Stai cercando di ottimizzare evitando un controllo superfluo, a questo proposito qui sono i fattori che devi conoscere:

  1. non è possibile avere nomi di classi duplicati nell'attributo di classe mediante la manipolazione di un elemento DOM tramite JavaScript. Se hai class="collapse" nel tuo codice HTML, chiamando Element.classList.add("collapse"); non aggiungerai un'altra collapse classe. Non conosco l'implementazione sottostante, ma suppongo che dovrebbe essere abbastanza buono.
  2. JQuery effettua alcuni controlli necessari nelle sue implementazioni addClass e removeClass (ho controllato il codice sorgente ). Per addClass, dopo aver effettuato alcuni controlli e se esiste una classe, JQuery non tenta di aggiungerlo di nuovo. Analogamente per removeClass, JQuery fa qualcosa sulla linea di cur.replace( " " + clazz + " ", " " ); che rimuoverà una classe solo se esiste.

Vale la pena notare che JQuery fa qualche ottimizzazione nella sua implementazione removeClass per evitare un inutile re-rendering. Va così

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

Quindi l'ottimizzazione migliore micro che si potrebbe fare sarebbe con l'obiettivo di evitare i costi di chiamata delle funzioni e i controlli di implementazione associati.

Supponi di voler attivare una classe denominata collapse, se hai il pieno controllo di quando la classe viene aggiunta o rimossa, e se la classe collapse è inizialmente assente, puoi ottimizzare come segue:

$(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;
        }
    };
})());

Per inciso, se stai spostando una classe a causa di cambiamenti nella posizione di scorrimento, ti consigliamo vivamente di acceleratore la gestione degli eventi di scorrimento.

4
Igwe Kalu
$("label")
  .not(".foo")
  .addClass("foo");