jQuery removeClass wildcard

Czy jest jakiś prosty sposób na usunięcie wszystkich pasujących klas, na przykład

color-*

więc jeśli mam element:

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

po usunięciu byłoby

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

Dzięki!

Funkcja removeClass pobiera argument funkcji od jQuery 1.4 .

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

Przykład na żywo: http://jsfiddle.net/xa9xS/1409/

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

Napisałem wtyczkę, która robi to o nazwie alterClass - Usuń klasy elementów z dopasowaniem symboli wieloznacznych. Opcjonalnie dodaj klasy: https://gist.github.com/1517285

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

Uogólniłem to na wtyczkę Jquery, która przyjmuje wyrażenie jako argument.

Kawa:

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

Tak więc w tym przypadku użycie byłoby (zarówno Kawa, jak i JavaScript):

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

Zauważ, że używam Array.filterfunkcji, która nie istnieje w IE <9. Możesz użyć funkcji filtru podkreślenia zamiast Google lub Google do wypełnienia takiego jak ten WTFPL .

Jeśli chcesz go używać w innych miejscach, sugeruję rozszerzenie. Ten działa dla mnie dobrze.

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

Stosowanie:

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

możemy pobrać wszystkie klasy .attr("class"), i do tablicy, i zapętlić i filtrować:

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/

Podobny do użytkownika @ tremby odpowiedź , oto @ Kobi za odpowiedź jako plugin, który będzie pasował zarówno przedrostków lub przyrostków.

• np. paski btn-minii btn-dangerale nie btnkiedy stripClass("btn-").
• np. paski horsebtni cowbtnale nie btn-minilub btnkiedystripClass('btn', 1)

Kod:

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

W przypadku wtyczki jQuery spróbuj tego

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

albo to

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

Na podstawie ARS81 „s odpowiedź (to tylko mecze nazwy klas rozpoczynające się), tutaj jest bardziej elastyczna wersja. Również hasClass()wersja wyrażenia regularnego.

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

To skutecznie usunie wszystkie nazwy klas, które zaczynają się prefixod classatrybutu węzła . Inne odpowiedzi nie obsługują elementów SVG (w momencie pisania tego), ale to rozwiązanie:

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

Miałem ten sam problem i przedstawiłem następujące, które wykorzystują metodę _.filter podkreślenia. Gdy odkryłem, że removeClass przyjmuje funkcję i udostępnia listę nazw klas, łatwo było przekształcić ją w tablicę i odfiltrować nazwę klasy, aby powrócić do metody 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;
});

Możesz to również zrobić za pomocą waniliowego JavaScript za pomocą Element.classList . Nie ma potrzeby używania wyrażenia regularnego:

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

Uwaga: zauważ, że tworzymy Arraykopię classListprzed rozpoczęciem, jest to ważne, ponieważ classListjest to transmisja na żywo, DomTokenListktóra będzie aktualizowana po usunięciu klas.

Możesz także użyć classNamewłaściwości obiektu DOM elementu:

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

Ogólna funkcja usuwająca dowolną klasę zaczynającą się od 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>

Dzielenie wyrażeń regularnych na granicy słów \bnie jest najlepszym rozwiązaniem:

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

lub jako mixin jQuery:

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

jeśli masz więcej niż jeden element o nazwie klasy „przykład”, aby usunąć klasy „kolor-” we wszystkich, możesz to zrobić: [używając jquery]

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

jeśli nie umieścisz [a-z1-9 -] * w wyrażeniu regularnym, nie usunie to klas, które mają numery lub niektóre „-” w ich nazwach.

Jeśli chcesz tylko usunąć ostatni ustawiony kolor, poniższe mogą Ci odpowiadać.

W mojej sytuacji musiałem dodać klasę kolorów do tagu body na zdarzeniu kliknięcia i usunąć ostatni ustawiony kolor. W takim przypadku zapisujesz bieżący kolor, a następnie wyszukujesz znacznik danych, aby usunąć ostatni ustawiony kolor.

Kod:

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

Może nie być dokładnie tym, czego potrzebujesz, ale dla mnie było to i było to pierwsze pytanie SO, na które spojrzałem, więc pomyślałem, że podzielę się moim rozwiązaniem, na wypadek, gdyby komukolwiek to pomogło.

Alternatywnym sposobem podejścia do tego problemu jest użycie atrybutów danych, które z natury są unikalne.

Ustawiłbyś kolor elementu takiego jak: $el.attr('data-color', 'red');

I stylizowałbyś to w css: [data-color="red"]{ color: tomato; }

To neguje potrzebę korzystania z klas, co powoduje efekt uboczny usuwania starych klas.