jQuery removeClass joker karakteri

Eşleşen tüm sınıfları kaldırmanın kolay bir yolu var mı, örneğin,

color-*

eğer bir elementim varsa:

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

çıkardıktan sonra,

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

Teşekkürler!

RemoveClass fonksiyonu yana bir işlev argüman alır jQuery 1.4 .

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

Canlı örnek: http://jsfiddle.net/xa9xS/1409/

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

AlterClass adlı bir eklenti yazdım - joker karakter eşleştirme ile öğe sınıflarını kaldırın. İsteğe bağlı olarak sınıf ekleyin: https://gist.github.com/1517285

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

Bunu bir argüman olarak normal ifadeyi alan bir Jquery eklentisi haline getirdim.

Kahve:

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

Yani, bu durumda, kullanım (hem Kahve hem de Javascript) olacaktır:

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

Array.filterIE <9 içinde bulunmayan işlevi kullandığımı unutmayın . Bunun yerine Underscore'un filtre işlevini veya bu WTFPL gibi bir çoklu dolgu için Google'ı kullanabilirsiniz .

Başka yerlerde kullanmak istiyorsanız, size bir uzantı öneriyoruz. Bu benim için iyi çalışıyor.

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

Kullanımı:

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

biz tarafından tüm sınıfları alabilirsiniz .attr("class"), ve Array, Ve döngü ve filtre:

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/

@ Tremby en benzer cevap , burada Kobi en @ olduğu cevap ön takı veya son iki maç olacak bir eklenti olarak.

• ex) şeritler btn-minive ne zaman btn-dangerdeğil .btnstripClass("btn-")
• örn.) şeritler horsebtnve cowbtndeğil btn-miniveya btnne zamanstripClass('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

Bir jQuery eklentisi için bunu deneyin

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

veya bu

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

Dayanarak ARS81 'ın cevabı (sadece ile başlayan sınıf adlarıyla eşleşmesini), burada daha esnek bir versiyonu. Ayrıca hasClass()normal ifade sürümü.

Kullanımı: $('.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;
};

Bu, prefixbir düğümün classözelliğinden başlayan tüm sınıf adlarını etkin bir şekilde kaldıracaktır . Diğer yanıtlar SVG öğelerini desteklemez ( bunu yazarken), ancak bu çözüm şunları yapar:

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

Aynı sorunu vardı ve alt çizgi _.filter yöntemini kullanan aşağıdaki ile geldi. RemoveClass'ın bir işlev aldığını ve size bir sınıf adı listesi sağladığını keşfettikten sonra, bunu bir diziye dönüştürüp removeClass yöntemine geri dönmek için sınıf adını filtrelemek kolaydı.

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

Bunu Element.classList kullanarak vanilya JavaScript ile de yapabilirsiniz . Normal bir ifade kullanmaya gerek yok:

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

Not: Uyarı biz yaratmak olduğunu Arraykopyasını classListberi önemli başlamadan önce, classListbir canlı DomTokenListsınıfları kaldırılır olarak güncellenir hangi.

classNameÖğenin DOM nesnesinin özelliğini de kullanabilirsiniz :

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

Şununla başlayan herhangi bir sınıfı kaldıran genel işlev 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>

Sözcük sınırındaki normal ifade bölünmesi \bbunun için en iyi çözüm değildir:

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

veya bir jQuery karışımı olarak:

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

'name' sınıf adına sahip birden fazla elemanınız varsa, 'color-'in sınıflarını kaldırmak için şunları yapabilirsiniz: [jquery kullanarak]

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

regex'inize [a-z1-9 -] * koymazsanız, adlarında bir sayı veya bazı '-' olan sınıfları kaldırmaz.

Son ayarlanan rengi kaldırmanız gerekirse, aşağıdakiler size uygun olabilir.

Benim durumumda, bir click olayındaki gövde etiketine bir renk sınıfı eklemem ve ayarlanan son rengi kaldırmam gerekiyordu. Bu durumda, geçerli rengi saklar ve son ayarlanan rengi kaldırmak için veri etiketine bakarsınız.

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

Tam olarak ihtiyacınız olan şey olmayabilir, ama benim için öyleydi ve bu baktığım ilk SO soruydu, bu yüzden herkese yardımcı olması durumunda çözümümü paylaşacağımı düşündüm.

Bu soruna yaklaşmanın alternatif bir yolu, doğası gereği benzersiz olan veri özelliklerini kullanmaktır.

Aşağıdaki gibi bir öğenin rengini belirlersiniz: $el.attr('data-color', 'red');

Ve css'de şöyle stil uygularsınız: [data-color="red"]{ color: tomato; }

Bu, eski sınıfları kaldırmanın yan etkisi olan sınıfları kullanma ihtiyacını ortadan kaldırır.