Wie entferne ich Klassen mit einem bestimmten Präfix aus einem HTML-Element?

Entfernen von Klassen mit einem bestimmten Präfix aus einem HTML-Element

In bestimmten Szenarien ist das Entfernen von Klassen aus einem Element basierend auf einem vordefinierten Präfix erforderlich . Betrachten Sie ein Div mit

Die Herausforderung:

Unser Ziel ist es, alle Klassen mit einem bestimmten Präfix, wie zum Beispiel „bg“, effektiv zu entfernen. Die versuchte Lösung, $("#a").removeClass("bg*"), erzielt nicht das gewünschte Ergebnis.

Die Lösung:

Diese Aufgabe erfordert einen individuelleren Ansatz, bei dem die Klassenliste herausgefiltert und neu zugewiesen wird. Eine genauere Implementierung mit JavaScript oder jQuery wird unten vorgestellt:

JavaScript:

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

jQuery Mixin:

$.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;
};

2018 ES6 Update:

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

Diese Lösungen identifizieren und entfernen effektiv alle Klassennamen, die mit dem angegebenen Präfix beginnen, und ermöglichen so eine dynamische Klassenverwaltung und -bearbeitung.

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