Belirli bir dizeyle başlayan tüm sınıfları kaldır

id="a"Birkaç gruptan kendisine eklenmiş herhangi bir sayıda sınıfa sahip olabilen bir div'im var. Her grubun belirli bir öneki vardır. Javascript'te, gruptan hangi sınıfın div üzerinde olduğunu bilmiyorum. Belirli bir öneke sahip tüm sınıfları temizleyebilmek ve ardından yeni bir tane ekleyebilmek istiyorum. "Bg" ile başlayan tüm sınıfları kaldırmak istersem, bunu nasıl yaparım? Bunun gibi bir şey ama aslında işe yarıyor:

$("#a").removeClass("bg*");

JQuery ile gerçek DOM öğesi sıfır dizinindedir, bu çalışmalıdır

$('#a')[0].className = $('#a')[0].className.replace(/\bbg.*?\b/g, '');

Kelime sınırına bölünen bir normal ifade \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(" ").trim();

veya 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 = $.trim(classes.join(" "));
    });
    return this;
};

2018 ES6 Güncellemesi:

const prefix = "prefix";
const classes = el.className.split(" ").filter(c => !c.startsWith(prefix));
el.className = classes.join(" ").trim();

Basit bir jQuery eklentisi yazdım - alterClass , joker karakter sınıfını kaldırıyor . İsteğe bağlı olarak sınıflar da ekleyecektir.

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

Bunu halletmek için jQuery'ye özel herhangi bir koda ihtiyacınız yoktur. Bunları değiştirmek için bir RegExp kullanın:

$("#a").className = $("#a").className.replace(/\bbg.*?\b/g, '');

Herhangi bir öneki desteklemek için bunu değiştirebilirsiniz, ancak RegExp yalnızca bir kez derleneceğinden daha hızlı yöntem yukarıdadır:

function removeClassByPrefix(el, prefix) {
    var regx = new RegExp('\\b' + prefix + '.*?\\b', 'g');
    el.className = el.className.replace(regx, '');
    return el;
}

Kullanımı 2 imza ait $.fn.removeClass:

// Considering:
var $el = $('<div class="  foo-1 a b foo-2 c foo"/>');

function makeRemoveClassHandler(regex) {
  return function (index, classes) {
    return classes.split(/\s+/).filter(function (el) {return regex.test(el);}).join(' ');
  }
}

$el.removeClass(makeRemoveClassHandler(/^foo-/));
//> [<div class=​"a b c foo">​</div>​]

http://www.mail-archive.com/jquery-en@googlegroups.com/msg03998.html diyor ki:

... ve .removeClass () tüm sınıfları kaldırır ...

Benim için çalışıyor;)

şerefe

Basit jQuery yapılarını ve dizi işleme işlevlerini kullanarak kullanacağım bir yaklaşım, sınıfın kontrol kimliğini ve önekini alan ve tüm sınıflandırılanları silen bir işlev bildirmektir. Kod eklenmiştir:

function removeclasses(controlIndex,classPrefix){
    var classes = $("#"+controlIndex).attr("class").split(" ");
    $.each(classes,function(index) {
        if(classes[index].indexOf(classPrefix)==0) {
            $("#"+controlIndex).removeClass(classes[index]);
        }
    });
}

Artık bu işlev herhangi bir yerden, bir düğmeye tıklayarak veya koddan çağrılabilir:

removeclasses("a","bg");

Modern tarayıcılar için:

let element = $('#a')[0];
let cls = 'bg';

element.classList.remove.apply(element.classList, Array.from(element.classList).filter(v=>v.startsWith(cls)));

Tam olarak aynı soruna çözüm arıyordum. "Fontid_" önekiyle başlayan tüm sınıfları kaldırmak için Bu makaleyi okuduktan sonra şu anda kullandığım küçük bir eklenti yazdım.

(function ($) {
        $.fn.removePrefixedClasses = function (prefix) {
            var classNames = $(this).attr('class').split(' '),
                className,
                newClassNames = [],
                i;
            //loop class names
            for(i = 0; i < classNames.length; i++) {
                className = classNames[i];
                // if prefix not found at the beggining of class name
                if(className.indexOf(prefix) !== 0) {
                    newClassNames.push(className);
                    continue;
                }
            }
            // write new list excluding filtered classNames
            $(this).attr('class', newClassNames.join(' '));
        };
    }(fQuery));

Kullanım:

$('#elementId').removePrefixedClasses('prefix-of-classes_');

Bunun eski bir soru olduğunu biliyorum, ancak yeni bir çözüm buldum ve dezavantajları olup olmadığını bilmek istiyorum.

$('#a')[0].className = $('#a')[0].className
                              .replace(/(^|\s)bg.*?(\s|$)/g, ' ')
                              .replace(/\s\s+/g, ' ')
                              .replace(/(^\s|\s$)/g, '');

Tek satırda ... someRegExp bir normal ifadeyle eşleşen tüm sınıfları kaldırır

$('#my_element_id').removeClass( function() { return (this.className.match(/someRegExp/g) || []).join(' ').replace(prog.status.toLowerCase(),'');});

Prestaul'un cevabı yardımcı oldu, ancak benim için pek işe yaramadı. İd ile bir nesneyi seçmenin jQuery yolu çalışmadı. Kullanmak zorundaydım

document.getElementById("a").className

onun yerine

$("#a").className

Ayrıca sınıf adı için tire '-' ve rakamlar kullanıyorum. Yani benim sürümüm '\ d-' içeriyor

$('#a')[0].className = $('#a')[0].className.replace(/\bbg.\d-*?\b/g, '');

(function($)
{
    return this.each(function()
    {
        var classes = $(this).attr('class');

        if(!classes || !regex) return false;

        var classArray = [];

        classes = classes.split(' ');

        for(var i=0, len=classes.length; i<len; i++) if(!classes[i].match(regex)) classArray.push(classes[i]);

        $(this).attr('class', classArray.join(' '));
    });
})(jQuery);

$("#element").removeAttr("class").addClass("yourClass");