Wie kann man effizient prüfen, ob ein JavaScript-Element eine bestimmte Klasse enthält?

So überprüfen Sie, ob ein Element eine Klasse in JavaScript enthält

Überprüfen, ob ein Element eine bestimmte Klasse in JavaScript enthält, ist eine häufige Aufgabe. Während es möglich ist, Switch-Anweisungen zu verwenden, um das Klassenattribut des Elements zu vergleichen, weist diese Methode Einschränkungen auf, wenn es um Elemente mit mehreren Klassen geht.

Für eine robustere Lösung sollten Sie die Verwendung der Methode element.classList.contains in Betracht ziehen:

element.classList.contains('class-name');

Diese Methode gibt true zurück, wenn das Element die angegebene Klasse hat, andernfalls false. Es unterstützt alle modernen Browser und verfügt über Polyfills für ältere Browser.

Alternativer Ansatz:

Wenn Sie ältere Browser unterstützen müssen und Polyfills keine Option sind, können Sie dies tun Verwenden Sie die folgende optimierte indexOf-Methode:

function hasClass(element, className) {
  return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1;
}

Diese Methode stellt sicher, dass die Suche innerhalb des gesamten Klassenattributs durchgeführt wird, was verhindert Fehlalarme aus Teilübereinstimmungen.

Anwenden auf das Beispiel:

Im bereitgestellten Beispiel können wir die hasClass-Methode verwenden, um den Code zu vereinfachen und das gewünschte Ergebnis zu erzielen:

var test = document.getElementById('test');

for (var i = 0, j = classes.length; i < j; i++) {
  if (hasClass(test, classes[i])) {
    test.innerHTML = 'I have ' + classes[i];
    break;
  }
}

Dieser Code durchläuft das Array von Klassen und prüft, ob eine davon im Klassenattribut des Elements enthalten ist. Dies ist eine effizientere und flexiblere Lösung als die Verwendung von Switch-Anweisungen oder String-Matching.

Das obige ist der detaillierte Inhalt vonWie kann man effizient prüfen, ob ein JavaScript-Element eine bestimmte Klasse enthält?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!