подстановочный знак jQuery removeClass

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

Я написал плагин, который делает это называется alterClass-удалить классы элементов с подстановочным знаком соответствия. При необходимости добавьте классы: https://gist.github.com/1517285

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

я обобщил это в плагин Jquery, который принимает регулярное выражение в качестве аргумента.

кофе:

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

Итак, в этом случае использование будет (как кофе, так и Javascript):

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

обратите внимание, что я использую Array.filter функция, которая не существует в IEфункция фильтра подчеркивания вместо этого или Google для полифилл, как этот WTFPL один.

похож на @tremby это ответ, вот @Коби ответ как плагин, который будет соответствовать либо префиксы или суффиксы.

• ex) полосы btn-mini и btn-danger а не btn, когда stripClass("btn-").
• ex) полосы horsebtn и cowbtn а не btn-mini или btn, когда stripClass('btn', 1)

код:

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

Если вы хотите использовать его в других местах, я предлагаю вам расширение. Этот отлично работает для меня.

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

использование:

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

мы можем получить все классы по .attr("class"), и массив, и цикл & фильтр:

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]);
    }
}

демо: http://jsfiddle.net/L2A27/1/

на основе ARS81 ' s ответ (это только соответствует именам классов, начиная с), вот более гибкая версия. Также hasClass() версию регулярного выражения.

использование: $('.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;
};

Это позволит эффективно удалить все имена классов, которые начинаются с prefix из узла . Другие ответы не поддерживают SVG элементов (на момент написания этого), но это решение тут:

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

У меня была та же проблема, и я придумал следующее, что использует подчеркивание _.метод filter. Как только я обнаружил, что removeClass принимает функцию и предоставляет вам список имен классов, было легко превратить это в массив и отфильтровать имя класса, чтобы вернуться к методу removeClass.

// 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;
});

вы также можете использовать className свойство объекта DOM элемента:

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

для плагина jQuery попробуйте это

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

или это

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

регулярное выражение расщепление на границе слова \b не лучшее решение для этого:

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

или как 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;
};

если у вас есть несколько элементов с именем класса "пример", чтобы удалить классы "цвет-" во всех из них вы можете сделать это: [с помощью jquery]

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

Если вы не поместите [a-z1-9-]* в свое регулярное выражение, оно не удалит классы, которые имеют число или некоторые '-' в их именах.

Если вам просто нужно удалить последний установленный цвет, вам может подойти следующее.

в моей ситуации мне нужно было добавить класс цвета к тегу body в событии click и удалить последний цвет, который был установлен. В этом случае вы сохраняете текущий цвет, а затем просматриваете тег данных, чтобы удалить последний установленный цвет.

код:

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

может быть, это не совсем то, что вам нужно, но для меня это был и это был первый вопрос, на который я посмотрел, поэтому подумал, что я бы поделитесь моим решением, если это кому-то поможет.