jQuery wildClass ký tự đại diện

Có cách nào dễ dàng để loại bỏ tất cả các lớp phù hợp, ví dụ,

color-*

vì vậy nếu tôi có một yếu tố:

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

sau khi gỡ bỏ, nó sẽ là

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

Cảm ơn!

Hàm removeClass nhận một đối số hàm kể từ jQuery 1.4 .

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

Ví dụ trực tiếp: http://jsfiddle.net/xa9xS/1409/

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

Tôi đã viết một plugin có chức năng này được gọi là notifyClass - Loại bỏ các lớp phần tử có khớp ký tự đại diện. Tùy chọn thêm các lớp: https://gist.github.com/1517285

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

Tôi đã khái quát điều này thành một plugin Jquery, lấy một biểu thức chính quy làm đối số.

Cà phê:

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

Vì vậy, trong trường hợp này, việc sử dụng sẽ là (cả Cà phê và Javascript):

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

Lưu ý rằng tôi đang sử dụng Array.filterchức năng không tồn tại trong IE <9. Bạn có thể sử dụng chức năng lọc của Underscore thay thế hoặc Google cho một polyfill như WTFPL này .

Nếu bạn muốn sử dụng nó ở những nơi khác, tôi khuyên bạn nên mở rộng. Điều này là làm việc tốt cho tôi.

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

Sử dụng:

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

chúng ta có thể nhận được tất cả các lớp bằng .attr("class"), và đến Array, và vòng lặp & bộ lọc:

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

bản demo: http://jsfiddle.net/L2A27/1/

Tương tự như câu trả lời của @ tremby , đây là câu trả lời của @ Kobi là một plugin sẽ khớp với tiền tố hoặc hậu tố.

• ex) dải btn-minivà btn-dangerkhông btnkhi stripClass("btn-").
• ví dụ) dải horsebtnvà cowbtnnhưng không btn-minihoặc btnkhistripClass('btn', 1)

Mã số:

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

Đối với một plugin jQuery hãy thử điều này

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

hoặc cái này

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

Dựa trên câu trả lời của ARS81 (chỉ khớp với tên lớp bắt đầu bằng), đây là phiên bản linh hoạt hơn. Vừa làhasClass() phiên bản regex.

Sử dụng: $('.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;
};

Điều này sẽ loại bỏ hiệu quả tất cả các tên lớp bắt đầu bằng thuộc tính prefixcủa một nút class. Các câu trả lời khác không hỗ trợ các yếu tố SVG (khi viết bài này), nhưng giải pháp này thực hiện:

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

Tôi đã có cùng một vấn đề và đã đưa ra những điều sau đây sử dụng phương thức _.filter của gạch dưới. Khi tôi phát hiện ra rằng removeClass có một hàm và cung cấp cho bạn một danh sách các tên lớp, thật dễ dàng để biến nó thành một mảng và lọc tên lớp để quay lại phương thức 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;
});

Bạn cũng có thể làm điều này với JavaScript vanilla bằng Element . ClassList . Không cần sử dụng biểu thức chính quy:

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

Lưu ý: Lưu ý rằng chúng tôi tạo một Arraybản sao của classListtrước khi bắt đầu, đó là điều quan trọng vì đây classListlà bản phát DomTokenListhành sẽ cập nhật khi các lớp bị xóa.

Bạn cũng có thể sử dụng thuộc classNametính của đối tượng DOM của phần tử:

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

Một hàm chung loại bỏ bất kỳ lớp nào bắt đầu bằng 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>

Một regex tách trên ranh giới từ \bkhông phải là giải pháp tốt nhất cho việc này:

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

hoặc như một 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;
};

nếu bạn có nhiều hơn một thành phần có tên lớp 'ví dụ', để xóa các lớp 'màu - trong tất cả chúng, bạn có thể thực hiện việc này: [bằng cách sử dụng jquery]

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

nếu bạn không đặt [a-z1-9 -] * trong regex của mình, nó sẽ không xóa các lớp có số hoặc một số '-' trong tên của chúng.

Nếu bạn chỉ cần loại bỏ màu thiết lập cuối cùng, những điều sau đây có thể phù hợp với bạn.

Trong tình huống của tôi, tôi cần thêm một lớp màu vào thẻ body trên một sự kiện nhấp chuột và xóa màu cuối cùng được đặt. Trong trường hợp đó, bạn lưu trữ màu hiện tại, rồi tìm thẻ dữ liệu để xóa màu đã đặt cuối cùng.

Mã số:

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

Có thể không chính xác những gì bạn cần, nhưng đối với tôi nó là và đây là câu hỏi SO đầu tiên tôi nhìn vào, vì vậy tôi nghĩ rằng tôi sẽ chia sẻ giải pháp của mình trong trường hợp nó giúp được bất cứ ai.

Một cách khác để tiếp cận vấn đề này là sử dụng các thuộc tính dữ liệu, về bản chất là duy nhất.

Bạn sẽ đặt màu của một yếu tố như: $el.attr('data-color', 'red');

Và bạn sẽ tạo kiểu cho nó trong css như: [data-color="red"]{ color: tomato; }

Điều này phủ nhận nhu cầu sử dụng các lớp, có tác dụng phụ là cần phải loại bỏ các lớp cũ.