Überprüfen Sie vor dem Hinzufügen, ob die Klasse bereits zugewiesen ist

113

Wird in jQuery empfohlen, vor dem Hinzufügen dieser Klasse zu überprüfen, ob einem Element bereits eine Klasse zugewiesen ist? Wird es überhaupt eine Wirkung haben?

Beispielsweise:

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

Wenn Sie Zweifel haben, ob die Klasse bazbereits zugewiesen wurde, labelist dies der beste Ansatz:

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

oder würde das reichen:

$('label').addClass('baz');
Muleskinner
quelle
12
Ich habe .hasClassnur verwendet, wenn ich überprüfen muss, ob eine Klasse vorhanden ist, wenn ich nur eine Klasse zuweisen muss - ich verwende .addClass. jQuery dupliziert die Klassen nicht
Samich
7
Fügen Sie einfach die Klasse hinzu, ohne sie zu testen. Wenn es bereits vorhanden ist, wird es nicht erneut hinzugefügt.
Blazemonger

Antworten:

177

Rufen Sie einfach an addClass(). jQuery erledigt die Prüfung für Sie. Wenn Sie auf eigene Faust zu überprüfen, verdoppeln Sie die Arbeit, da jQuery wird immer noch die Prüfung für Sie ausführen.

jmar777
quelle
47

Eine einfache Überprüfung in der Konsole hätte ergeben, dass ein addClassmehrmaliger Anruf mit derselben Klasse sicher ist.

Insbesondere finden Sie den Scheck in der Quelle

if ( !~setClass.indexOf( " " + classNames[ c ] + " " ) ) {
  setClass += classNames[ c ] + " ";
}
Raynos
quelle
2
Bitte lesen Sie meine Frage noch einmal und Sie werden feststellen, dass es nicht darum geht, sicher zu sein, sondern um bewährte Verfahren
Muleskinner
7
Aus Ihrer bearbeiteten Antwort geht hervor, dass jQuery tatsächlich prüft, ob die Klasse bereits zugewiesen ist, bevor sie hinzugefügt wird, dh es wäre eine schlechte Praxis, die Prüfung selbst durchzuführen / danke
Muleskinner,
5
@Muleskinner das habe ich angedeutet.
Raynos
41
@ Raynos: Eine einfache Überprüfung in der Konsole hätte ergeben, dass das mehrmalige Aufrufen von addClass mit derselben Klasse sicher ist. Trotzdem war diese Frage einer der Top-Hits, als ich nach einer Antwort gegoogelt habe ... Selbst triviale Dinge, die an anderer Stelle gut dokumentiert sind, haben imho einen Platz auf Stack Overflow.
Eirirlar
10
Diese Antwort enthält viel zu viel Einstellung. Hätte es mit etwas Fingerspitzengefühl beantworten können.
Dreadwail
4

Diese Frage erregte meine Aufmerksamkeit nach einer anderen, die als Duplikat dieser Frage markiert war .

Diese Antwort fasst die akzeptierte Antwort mit einem kleinen Detail zusammen.

Sie versuchen zu optimieren, indem Sie unnötige Überprüfungen vermeiden. In diesem Zusammenhang sind folgende Faktoren zu beachten:

  1. Es ist nicht möglich, doppelte Klassennamen im Klassenattribut zu haben, indem ein DOM-Element über JavaScript bearbeitet wird. Wenn Sie class="collapse"in Ihrem HTML, calling Element.classList.add("collapse");keine zusätzliche hinzufügen Zusammenbruch Klasse. Ich kenne die zugrunde liegende Implementierung nicht, aber ich denke, sie sollte gut genug sein.
  2. JQuery führt einige notwendige Überprüfungen in seinen addClassund removeClassImplementierungen durch (ich habe den Quellcode überprüft ). Für addClassnach einigen Prüfungen zu machen , und wenn eine Klasse vorhanden ist JQuery nicht versucht , es wieder hinzuzufügen. In ähnlicher Weise removeClassführt JQuery etwas aus, entlang dessen cur.replace( " " + clazz + " ", " " );eine Klasse nur dann entfernt wird, wenn sie existiert.

Bemerkenswert ist, dass JQuery einige Optimierungen in seiner removeClassImplementierung vornimmt, um ein sinnloses erneutes Rendern zu vermeiden. Es geht so

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

Die beste Mikrooptimierung, die Sie durchführen können, besteht darin, den Aufwand für Funktionsaufrufe und die damit verbundenen Implementierungsprüfungen zu vermeiden.

Angenommen, Sie möchten eine Klasse mit dem Namen umschalten collapse, wenn Sie die vollständige Kontrolle darüber haben, wann die Klasse hinzugefügt oder entfernt wird, und wenn die collapseKlasse anfänglich nicht vorhanden ist, können Sie Folgendes optimieren:

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

Wenn Sie eine Klasse aufgrund von Änderungen in der Bildlaufposition umschalten, wird dringend empfohlen, die Behandlung von Bildlaufereignissen zu drosseln .

Igwe Kalu
quelle
1
$("label")
  .not(".foo")
  .addClass("foo");
טאבו ישראל שרות לקוחות
quelle