jQuery removeClass-Platzhalter

Gibt es eine einfache Möglichkeit, alle übereinstimmenden Klassen zu entfernen, z.

color-*

Also, wenn ich 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>

Vielen Dank!

Die Funktion removeClass verwendet seit jQuery 1.4 ein Funktionsargument .

$("#hello").removeClass (function (index, className) {
    return (className.match (/(^|\s)color-\S+/g) || []).join(' ');
});

Live-Beispiel: http://jsfiddle.net/xa9xS/1409/

$('div').attr('class', function(i, c){
    return c.replace(/(^|\s)color-\S+/g, '');
});

Ich habe ein Plugin namens alterClass geschrieben, das Elementklassen mit Platzhalterübereinstimmung entfernt. Fügen Sie optional Klassen hinzu: https://gist.github.com/1517285

$( '#foo' ).alterClass( 'foo-* bar-*', 'foobar' )

Ich habe dies in ein Jquery-Plugin verallgemeinert, das einen regulären Ausdruck als Argument verwendet.

Kaffee:

$.fn.removeClassRegex = (regex) ->
  $(@).removeClass (index, classes) ->
    classes.split(/\s+/).filter (c) ->
      regex.test c
    .join ' '

Javascript:

$.fn.removeClassRegex = function(regex) {
  return $(this).removeClass(function(index, classes) {
    return classes.split(/\s+/).filter(function(c) {
      return regex.test(c);
    }).join(' ');
  });
};

In diesem Fall wäre die Verwendung also (sowohl Kaffee als auch Javascript):

$('#hello').removeClassRegex(/^color-/)

Beachten Sie, dass ich die Array.filterFunktion verwende, die in IE <9 nicht vorhanden ist. Sie können stattdessen die Filterfunktion von Underscore oder Google für eine Polyfüllung wie diese WTFPL verwenden .

Wenn Sie es an anderen Orten verwenden möchten, empfehle ich Ihnen eine Erweiterung. Dieser funktioniert gut für mich.

 $.fn.removeClassStartingWith = function (filter) {
    $(this).removeClass(function (index, className) {
        return (className.match(new RegExp("\\S*" + filter + "\\S*", 'g')) || []).join(' ')
    });
    return this;
};

Verwendungszweck:

$(".myClass").removeClassStartingWith('color');

Wir können alle Klassen von .attr("class")und zu Array und Loop & Filter abrufen:

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/

Ähnlich wie @ tremby die Antwort ist hier @ Kobi die Antwort als ein Plugin , das entweder Präfixe oder Suffixe übereinstimmen.

• ex) Streifen btn-miniund btn-dangeraber nicht btnwannstripClass("btn-") .
• ex) Streifen horsebtnund cowbtnaber nicht btn-minioder btnwannstripClass('btn', 1)

Code:

$.fn.stripClass = function (partialMatch, endOrBegin) {
    /// <summary>
    /// The way removeClass should have been implemented -- accepts a partialMatch (like "btn-") to search on and remove
    /// </summary>
    /// <param name="partialMatch">the class partial to match against, like "btn-" to match "btn-danger btn-active" but not "btn"</param>
    /// <param name="endOrBegin">omit for beginning match; provide a 'truthy' value to only find classes ending with match</param>
    /// <returns type=""></returns>
    var x = new RegExp((!endOrBegin ? "\\b" : "\\S+") + partialMatch + "\\S*", 'g');

    // https://stackoverflow.com/a/2644364/1037948
    this.attr('class', function (i, c) {
        if (!c) return; // protect against no class
        return c.replace(x, '');
    });
    return this;
};

https://gist.github.com/zaus/6734731

Versuchen Sie dies für ein jQuery-Plugin

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

oder dieses

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

Basierend auf der Antwort von ARS81 (die nur mit Klassennamen übereinstimmt, die mit beginnen), ist hier eine flexiblere Version. Auch eine Regex-Version.hasClass()

Verwendungszweck: $('.selector').removeClassRegex('\\S*-foo[0-9]+')

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

$.fn.hasClassRegex = function(name) {
  return this.attr('class').match(new RegExp('\\b(' + name + ')\\b', 'g')) !== null;
};

Dadurch werden effektiv alle Klassennamen, die mit beginnen, prefixaus dem classAttribut eines Knotens entfernt . Andere Antworten unterstützen keine SVG- Elemente (zum Zeitpunkt des Schreibens), aber diese Lösung bietet:

$.fn.removeClassPrefix = function(prefix){
    var c, regex = new RegExp("(^|\\s)" + prefix + "\\S+", 'g');
    return this.each(function(){
        c = this.getAttribute('class');
        this.setAttribute('class', c.replace(regex, ''));
    });
};

Ich hatte das gleiche Problem und fand Folgendes, das die _.filter-Methode des Unterstrichs verwendet. Als ich herausfand, dass removeClass eine Funktion übernimmt und Ihnen eine Liste von Klassennamen zur Verfügung stellt, war es einfach, diese in ein Array umzuwandeln und den Klassennamen herauszufiltern, um zur removeClass-Methode zurückzukehren.

// Wildcard removeClass on 'color-*'
$('[class^="color-"]').removeClass (function (index, classes) {
  var
    classesArray = classes.split(' '),
    removeClass = _.filter(classesArray, function(className){ return className.indexOf('color-') === 0; }).toString();

  return removeClass;
});

Sie können dies auch mit Vanille-JavaScript mithilfe von Element.classList tun . Es ist auch nicht erforderlich, einen regulären Ausdruck zu verwenden:

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

Hinweis: Beachten Sie, dass wir vor dem Start eine ArrayKopie von erstellen. Dies classListist wichtig, da classListes sich um ein Live handelt, DomTokenListdas aktualisiert wird, wenn Klassen entfernt werden.

Sie können auch die classNameEigenschaft des DOM-Objekts des Elements verwenden:

var $hello = $('#hello');
$('#hello').attr('class', $hello.get(0).className.replace(/\bcolor-\S+/g, ''));

Eine generische Funktion, die alle Klassen entfernt, beginnend 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>

Eine Regex-Aufteilung an der Wortgrenze \bist hierfür nicht die beste Lösung:

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

oder als 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 = classes.join(" ");
    });
    return this;
};

Wenn Sie mehr als ein Element mit dem Klassennamen 'Beispiel' haben, können Sie Folgendes tun, um Klassen von 'Farbe' in allen zu entfernen: [using jquery]

var objs = $('html').find('.example');
for(index=0 ; index < obj1s.length ; index++){
    objs[index].className = objs[index].className.replace(/col-[a-z1-9\-]*/,'');
}

Wenn Sie [a-z1-9 -] * nicht in Ihre Regex einfügen, werden die Klassen nicht entfernt, deren Namen eine Zahl oder ein '-' enthalten.

Wenn Sie nur die zuletzt eingestellte Farbe entfernen müssen, passt möglicherweise Folgendes zu Ihnen.

In meiner Situation musste ich dem Body-Tag bei einem Klickereignis eine Farbklasse hinzufügen und die zuletzt festgelegte Farbe entfernen. In diesem Fall speichern Sie die aktuelle Farbe und suchen dann das Daten-Tag, um die zuletzt festgelegte Farbe zu entfernen.

Code:

var colorID = 'Whatever your new color is';

var bodyTag = $('body');
var prevColor = bodyTag.data('currentColor'); // get current color
bodyTag.removeClass(prevColor);
bodyTag.addClass(colorID);
bodyTag.data('currentColor',colorID); // set the new color as current

Könnte nicht genau das sein, was Sie brauchen, aber für mich war es das und dies war die erste SO-Frage, die ich mir ansah. Ich dachte, ich würde meine Lösung teilen, falls sie jemandem hilft.

Eine alternative Möglichkeit, dieses Problem anzugehen, besteht darin, Datenattribute zu verwenden, die von Natur aus eindeutig sind.

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

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

Dies macht die Verwendung von Klassen überflüssig, was den Nebeneffekt hat, dass alte Klassen entfernt werden müssen.