webentwicklung-frage-antwort-db.com.de

jQuery removeClass-Platzhalter

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

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>

Vielen Dank!

317
atp

Die Funktion removeClass nimmt ein Funktionsargument seit jQuery 1.4 an.

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

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

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

Ich habe ein Plugin geschrieben, das dies als alterClass - Elementklassen mit Platzhalterabgleich entfernen - ausführt. Fügen Sie optional Klassen hinzu: https://Gist.github.com/1517285

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

Ich habe dies in ein Jquery-Plugin verallgemeinert, das eine Regex 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 (sowohl Kaffee als auch Javascript):

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

Beachten Sie, dass ich die Array.filter-Funktion verwende, die in IE <9 nicht vorhanden ist. Sie könnten Underscores Filterfunktion oder Google für eine Polyfill wie dieses WTFPL verwenden .

15
tremby

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');
8
Charly Guirao

wir können alle Klassen über .attr("class") und Array, And loop & filter erhalten:

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/

4
meni181818

Ähnlich wie bei @tremby answer ist hier @ Kobis answer ein Plugin, das entweder mit Präfixen oder Suffixen übereinstimmt.

  • ex) Streifen btn-mini und btn-danger, aber nicht btn, wenn stripClass("btn-").
  • ex) Streifen horsebtn und cowbtn, jedoch nicht btn-mini oder btn, wenn stripClass('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

4
drzaus

Basierend auf ARS81 s answer (das nur Klassennamen entspricht, die mit beginnen), gibt es eine flexiblere Version. Auch eine hasClass() Regex-Version.

Verwendung: $('.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;
};
2

Ich hatte das gleiche Problem und kam zu folgendem Ergebnis, das die _.filter-Methode von Unterstrich verwendet. Nachdem ich herausgefunden hatte, dass removeClass eine Funktion übernimmt und Ihnen eine Liste mit 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;
});
2
nynyny

Dadurch werden alle Klassennamen, die mit prefix beginnen, aus dem class-Attribut eines Knotens entfernt. Andere Antworten unterstützen keine SVG -Elemente (zum Zeitpunkt des Schreibens), aber diese Lösung tut Folgendes:

$.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, ''));
    });
};
2
vsync

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

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

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;
};
1
ARS81

Eine Regex-Aufteilung an der Word-Grenze \b ist dafü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;
};
0
sarink

wenn Sie mehr als ein Element mit dem Klassennamen 'example' haben, können Sie die Klassen von 'color-' 'in allen Klassen entfernen, indem Sie Folgendes tun: [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 Ihren regulären Ausdruck einfügen, werden die Klassen nicht entfernt, deren Namen eine Zahl oder ein '-' enthalten.

Sie können dies auch mit Vanilla JavaScript tun, indem Sie Element.classList verwenden. Sie müssen auch keinen regulären Ausdruck 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 Array-Kopie der classList erstellen. Dies ist wichtig, da classList eine Live-DomTokenList ist, die beim Entfernen von Klassen aktualisiert wird.

0
kzar

Wenn Sie nur die zuletzt eingestellte Farbe entfernen müssen, kann Folgendes zu Ihnen passen.

In meiner Situation musste ich dem body-Tag eines Klickereignisses eine Farbklasse hinzufügen und die zuletzt eingestellte Farbe entfernen. In diesem Fall speichern Sie die aktuelle Farbe und suchen nach dem Datentag, um die zuletzt eingestellte 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

Vielleicht nicht genau das, was Sie brauchen, aber für mich war dies die erste SO -Frage, die ich mir ansah, also dachte ich, ich würde meine Lösung mitteilen, falls sie jemandem hilft.

0
redfox05

Eine generische Funktion, die alle Klassen entfernt, die mit begin beginnen:

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>

0
Imabot