jQuery removeClass Platzhalter

Question

Gibt es eine einfache Möglichkeit, alle übereinstimmenden Klassen zu entfernen, zum Beispiel,

color-*

wenn ich also ein Element habe:

<div id="hello" class="color-red color-brown foo bar"></div>

nach dem Entfernen, wäre es

<div id="hello" class="foo bar"></div>

Merci !

Answer 1

Eine generische Funktion, die jede Klasse entfernt, die mit begin :

function removeClassStartingWith(node, begin) {
    node.removeClass (function (index, className) {
        return (className.match ( new RegExp("\\b"+begin+"\\S+", "g") ) || []).join(' ');
    });
}

http://jsfiddle.net/xa9xS/2900/

var begin = 'color-';

function removeClassStartingWith(node, begin) {
    node.removeClass (function (index, className) {
        return (className.match ( new RegExp("\\b"+begin+"\\S+", "g") ) || []).join(' ');
    });
}

removeClassStartingWith($('#hello'), 'color-');

console.log($("#hello")[0].className);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hello" class="color-red color-brown foo bar"></div>

Answer 2

Eine andere Möglichkeit, dieses Problem zu lösen, ist die Verwendung von Datenattributen, die von Natur aus eindeutig sind.

Sie würden die Farbe eines Elements wie folgt festlegen: $el.attr('data-color', 'red');

Und Sie würden es in css Stil wie: [data-color="red"]{ color: tomato; }

Dadurch entfällt die Notwendigkeit, Klassen zu verwenden, was den Nebeneffekt hat, dass alte Klassen entfernt werden müssen.

Answer 3

Für ein jQuery-Plugin versuchen Sie dies

$.fn.removeClassLike = function(name) {
    return this.removeClass(function(index, css) {
        return (css.match(new RegExp('\\b(' + name + '\\S*)\\b', 'g')) || []).join(' ');
    });
};

oder dies

$.fn.removeClassLike = function(name) {
    var classes = this.attr('class');
    if (classes) {
        classes = classes.replace(new RegExp('\\b' + name + '\\S*\\s?', 'g'), '').trim();
        classes ? this.attr('class', classes) : this.removeAttr('class');
    }
    return this;
};

Bearbeiten: Der zweite Ansatz sollte ein bisschen schneller sein, weil das nur eine Regex-Ersetzung auf die gesamte Klasse Zeichenfolge ausgeführt wird. Die erste (kürzere) verwendet jQuery eigene removeClass-Methode, die durch alle vorhandenen Klassennamen durchläuft und testet sie für die angegebene Regex eine nach der anderen, so unter der Haube es tut mehr Schritte für die gleiche Aufgabe. In der Praxis ist der Unterschied jedoch vernachlässigbar.

Geschwindigkeitsvergleich Benchmark

Answer 4

Können wir alle Klassen erhalten durch .attr("class") und zu Array, und Schleife & Filter:

var classArr = $("#sample").attr("class").split(" ")
$("#sample").attr("class", "")
for(var i = 0; i < classArr.length; i ++) {
    // some condition/filter
    if(classArr[i].substr(0, 5) != "color") {
        $("#sample").addClass(classArr[i]);
    }
}

Demo: http://jsfiddle.net/L2A27/1/

Answer 5

Sie könnten dies auch mit Vanilla JavaScript tun, indem Sie Element.classList . Auch die Verwendung eines regulären Ausdrucks ist nicht erforderlich:

function removeColorClasses(element) { for (let className of Array.from(element.classList)) if (className.startsWith("color-")) element.classList.remove(className); }

Hinweis: Beachten Sie, dass wir eine Array Kopie der classList vor dem Start, das ist wichtig, denn classList ist eine Live DomTokenList die aktualisiert wird, wenn Klassen entfernt werden.