jQuery removeClass wildcard

มีวิธีง่ายๆในการลบการจับคู่คลาสทั้งหมดหรือไม่ตัวอย่างเช่น

color-*

ดังนั้นถ้าฉันมีองค์ประกอบ:

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

หลังจากลบมันจะเป็น

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

ขอบคุณ!

removeClassฟังก์ชั่นใช้เวลาโต้แย้งฟังก์ชั่นตั้งแต่jQuery 1.4

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

ตัวอย่างสด: http://jsfiddle.net/xa9xS/1409/

$('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 ซึ่งใช้ regex เป็นอาร์กิวเมนต์

กาแฟ:

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

ดังนั้นในกรณีนี้การใช้งานจะเป็น (ทั้ง Coffee และ Javascript):

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

โปรดทราบว่าฉันใช้Array.filterฟังก์ชันที่ไม่มีอยู่ใน IE <9 คุณสามารถใช้ฟังก์ชันตัวกรองของขีดล่างแทนหรือ Google สำหรับโพลีฟิลเช่นWTFPLนี้

หากคุณต้องการใช้ในที่อื่นฉันขอแนะนำให้คุณใช้ส่วนขยาย อันนี้ใช้ได้ดีสำหรับฉัน

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

คล้ายกับคำตอบของ @ tremby นี่คือคำตอบของ @ Kobi ในฐานะปลั๊กอินที่จะตรงกับคำนำหน้าหรือคำต่อท้าย

• อดีต) แถบbtn-miniและbtn-dangerแต่ไม่เมื่อbtnstripClass("btn-")
• อดีต) แถบ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

สำหรับปลั๊กอิน 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;
};

จากคำตอบของARS81 (ตรงกับชื่อคลาสที่ขึ้นต้นด้วย) นี่คือเวอร์ชันที่ยืดหยุ่นกว่า ยังhasClass()รุ่น regex

การใช้งาน: $('.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จากclassแอ็ตทริบิวต์ของโหนดอย่างมีประสิทธิภาพ คำตอบอื่น ๆ ไม่สนับสนุนองค์ประกอบ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 รับฟังก์ชั่นและให้รายชื่อคลาสคุณก็สามารถเปลี่ยนให้เป็นอาร์เรย์และกรอง classname เพื่อกลับไปยังเมธอด 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;
});

นอกจากนี้คุณยังสามารถทำเช่นนี้กับวานิลลา JavaScript ใช้Element.classList ไม่จำเป็นต้องใช้นิพจน์ทั่วไปเช่นกัน:

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

หมายเหตุ: โปรดสังเกตว่าเราสร้างArrayสำเนาของclassListก่อนเริ่มต้นสิ่งสำคัญเนื่องจากclassListเป็นรายการสดDomTokenListซึ่งจะอัปเดตเมื่อมีการลบคลาสออก

คุณสามารถใช้classNameคุณสมบัติของวัตถุ DOM ขององค์ประกอบ:

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

ฟังก์ชันทั่วไปที่ลบคลาสใด ๆ ที่ขึ้นต้นด้วย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>

การแยก regex บนขอบเขตของคำ\bไม่ใช่วิธีที่ดีที่สุดสำหรับสิ่งนี้:

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

หรือเป็น mixQuery 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;
};

หากคุณมีองค์ประกอบมากกว่าหนึ่งรายการที่มีชื่อคลาส 'ตัวอย่าง' เพื่อลบคลาสของ 'color-' ในรายการทั้งหมดคุณสามารถทำได้ดังนี้: [using 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 -] * ใน regex ของคุณมันจะไม่ลบคลาสที่มีตัวเลขหรือ '-' อยู่ในชื่อของมัน

หากคุณเพียงแค่ต้องลบสีชุดสุดท้ายดังต่อไปนี้อาจเหมาะกับคุณ

ในสถานการณ์ของฉันฉันจำเป็นต้องเพิ่มคลาสสีให้กับแท็ก body ในเหตุการณ์คลิกและลบสีสุดท้ายที่ตั้งค่าไว้ ในกรณีนี้คุณเก็บสีปัจจุบันแล้วค้นหาแท็กข้อมูลเพื่อลบสีชุดสุดท้าย

รหัส:

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

อาจไม่ใช่สิ่งที่คุณต้องการ แต่สำหรับฉันมันเป็นและนี่คือคำถาม SO แรกที่ฉันดูดังนั้นคิดว่าฉันจะแบ่งปันโซลูชันของฉันในกรณีที่มันช่วยใครได้

อีกทางเลือกหนึ่งในการเข้าถึงปัญหานี้คือการใช้คุณลักษณะข้อมูลซึ่งเป็นลักษณะเฉพาะ

คุณต้องการกำหนดสีขององค์ประกอบเช่น: $el.attr('data-color', 'red');

และคุณต้องการสไตล์ใน css เช่น: [data-color="red"]{ color: tomato; }

สิ่งนี้ขัดแย้งกับความจำเป็นในการใช้คลาสซึ่งมีผลข้างเคียงของการต้องการลบคลาสเก่า