jQuery removeClass wildcard

Apakah ada cara mudah untuk menghapus semua kelas yang cocok, misalnya,

color-*

jadi jika saya memiliki elemen:

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

setelah menghapus, itu akan menjadi

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

Terima kasih!

Fungsi removeClass mengambil argumen fungsi sejak jQuery 1.4 .

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

Contoh langsung: http://jsfiddle.net/xa9xS/1409/

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

Saya telah menulis sebuah plugin yang melakukan ini disebut alterClass - Hapus elemen kelas dengan pencocokan wildcard. Opsional tambahkan kelas: https://gist.github.com/1517285

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

Saya telah menyamaratakan ini menjadi plugin Jquery yang menggunakan regex sebagai argumen.

Kopi:

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

Jadi, untuk kasus ini, penggunaannya adalah (Kopi dan Javascript):

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

Perhatikan bahwa saya menggunakan Array.filterfungsi yang tidak ada di IE <9. Anda dapat menggunakan fungsi filter Underscore sebagai gantinya atau Google untuk polyfill seperti ini WTFPL .

Jika Anda ingin menggunakannya di tempat lain saya sarankan Anda ekstensi. Yang ini berfungsi dengan baik untuk saya.

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

Pemakaian:

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

kita bisa mendapatkan semua kelas dengan .attr("class"), dan ke Array, Dan loop & filter:

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/

Mirip dengan jawaban @ tremby , berikut adalah jawaban @ Kobi sebagai plugin yang akan cocok dengan awalan atau sufiks.

• ex) strip btn-minidan btn-dangertetapi tidak btnkapan stripClass("btn-").
• ex) strip horsebtndan cowbtntetapi tidak btn-miniatau btnkapanstripClass('btn', 1)

Kode:

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

Untuk plugin jQuery coba ini

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

atau ini

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

Berdasarkan ARS81 's jawaban (yang hanya cocok nama kelas diawali dengan), inilah versi yang lebih fleksibel. Juga hasClass()versi regex.

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

Ini akan secara efektif menghapus semua nama kelas yang dimulai dengan prefixdari classatribut node . Jawaban lain tidak mendukung elemen SVG (saat penulisan ini), tetapi solusi ini tidak:

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

Saya memiliki masalah yang sama dan muncul dengan berikut ini yang menggunakan metode _.filter garis bawah. Setelah saya menemukan bahwa removeClass mengambil fungsi dan memberi Anda daftar nama kelas, mudah untuk mengubahnya menjadi array dan memfilter nama kelas untuk kembali ke metode 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;
});

Anda juga bisa melakukan ini dengan JavaScript vanilla menggunakan Element.classList . Tidak perlu menggunakan ekspresi reguler juga:

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

Catatan: Perhatikan bahwa kami membuat Arraysalinan dari classListsebelum memulai, itu penting karena classListlive DomTokenListyang akan diperbarui ketika kelas dihapus.

Anda juga bisa menggunakan classNameproperti objek DOM elemen:

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

Fungsi generik yang menghapus kelas apa pun yang dimulai dengan 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>

Pemisahan regex pada batas kata \bbukan solusi terbaik untuk ini:

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

atau sebagai 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;
};

jika Anda memiliki lebih dari satu elemen yang memiliki nama kelas 'contoh', untuk menghapus kelas 'warna-' pada semuanya, Anda dapat melakukan ini: [menggunakan jquery]

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

jika Anda tidak memasukkan [a-z1-9 -] * di regex Anda, ia tidak akan menghapus kelas yang memiliki nomor atau '-' dalam namanya.

Jika Anda hanya perlu menghapus warna set terakhir, berikut ini mungkin cocok untuk Anda.

Dalam situasi saya, saya perlu menambahkan kelas warna ke tag tubuh pada acara klik dan menghapus warna terakhir yang telah ditetapkan. Dalam hal ini, Anda menyimpan warna saat ini, dan kemudian mencari tag data untuk menghapus warna set terakhir.

Kode:

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

Mungkin tidak persis apa yang Anda butuhkan, tetapi bagi saya itu dan ini adalah pertanyaan SO pertama yang saya lihat, jadi saya pikir saya akan membagikan solusi saya jika itu membantu siapa pun.

Cara alternatif untuk mendekati masalah ini adalah dengan menggunakan atribut data, yang pada dasarnya unik.

Anda telah mengatur warna elemen seperti: $el.attr('data-color', 'red');

Dan Anda akan menggunakannya dalam css seperti: [data-color="red"]{ color: tomato; }

Ini meniadakan kebutuhan untuk menggunakan kelas, yang memiliki efek samping dari keharusan untuk menghapus kelas lama.