Wie entferne ich effizient Klassen mit einem bestimmten Präfix in JavaScript?

Klassen mit spezifischen Präfixen verwalten

Das Bearbeiten von Klassen in JavaScript kann eine Herausforderung sein, insbesondere wenn es um mehrere Klassen geht, die zu verschiedenen Gruppen mit eindeutigen Präfixen gehören . In diesem Artikel wird ein häufiges Problem untersucht: das Entfernen von Klassen mit einem bestimmten Präfix aus einem DIV-Element und das Ersetzen durch ein neues.

Das Problem

Angenommen, Sie haben ein DIV Element mit der ID „a“, das mehrere Klassen aus verschiedenen Gruppen haben kann. Jede Gruppe hat ein bestimmtes Präfix. Allerdings wissen Sie in Ihrem JavaScript-Code möglicherweise nicht, welche Klasse aus einer bestimmten Gruppe derzeit dem DIV-Element zugewiesen ist. Ihr Ziel ist es, alle Klassen mit einem Präfix wie „bg“ zu entfernen und eine neue hinzuzufügen. Der folgende Codeausschnitt veranschaulicht das Problem:

$("#a").removeClass("bg*");

Dieser Code funktioniert jedoch nicht wie beabsichtigt.

Lösung

Ein robusterer Ansatz besteht darin, einen regulären Ausdruck zu verwenden, der die Klassennamen an Wortgrenzen aufteilt und die Klassen herausfiltert, die nicht das angegebene Präfix haben. Hier ist ein Beispiel:

var prefix = "bg";
var classes = el.className.split(" ").filter(function(c) {
    return c.lastIndexOf(prefix, 0) !== 0;
});
el.className = classes.join(" ").trim();

Alternativ können Sie ein jQuery-Mixin erstellen, um diesen Prozess zu vereinfachen:

$.fn.removeClassPrefix = function(prefix) {
    this.each(function(i, el) {
        var classes = el.className.split(" ").filter(function(c) {
            return c.lastIndexOf(prefix, 0) !== 0;
        });
        el.className = $.trim(classes.join(" "));
    });
    return this;
};

Um dieses Mixin zu verwenden, rufen Sie einfach die Funktion „removeClassPrefix()“ auf dem DIV auf Element und geben Sie das Präfix an, das Sie entfernen möchten:

$("#a").removeClassPrefix("bg");

ES6 Update (2018)

In modernem JavaScript (ES6 und höher) können Sie eine einfachere Version der Lösung verwenden:

const prefix = "bg";
const classes = el.className.split(" ").filter(c => !c.startsWith(prefix));
el.className = classes.join(" ").trim();

Dieser Code nutzt die Pfeilfunktion und startetWith() Methode zum effektiven Herausfiltern von Klassen mit dem angegebenen Präfix.

Das obige ist der detaillierte Inhalt vonWie entferne ich effizient Klassen mit einem bestimmten Präfix in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!