Question

我有一些向上/向下按钮，通过向包含元素添加类来增加/减少所选文本的大小，例如

<span class="font20">Some text </span>

“font20”类设置font-size：20px，“font21”设置font-size：21等。

我有另一个按钮“清除格式”，需要删除我添加的任何类。我可以通过看看是否应用了font20并删除它（如果是）。如果没有，请查看是否应用了font21，如果是，则删除它等，并经历50次左右的可能性。但我宁愿做的是像

selector$.removeClass("*");

即删除可能已添加的所有类。上面的removeClass("*")似乎不起作用。有没有其他方法可以使用jQuery删除应用于选择器的所有类？

感谢。

Answer 1

只需使用selector$.removeClass();删除所有类。

Answer 2

来自documentation：

如果包含类名作为参数，则只会从匹配元素集中删除该类。如果参数中未指定类名，则将删除所有类。

所以简单地使用：

$('#whatever').removeClass();

将从#whatever删除所有类。

Answer 3

使用attr()：

selector$.attr("class", "");

Answer 4

当我想保留基类并删除任何动态添加的类时，我将执行以下操作。

我将使用默认类在元素上添加数据属性。

<span class="default dynamic" data-class="default">Text</span>

然后，要重置它，我只需将data-class元素应用于class。

var defaultClass = $('span').attr('data-class');
$('span').attr('class', defaultClass);

Answer 5

调用不带参数的removeClass将删除所有项目的类。

$("span").removeClass();

Answer 6

如果你只想删除通过按钮添加的类，那么jQuery允许你在1次调用中删除几个（空格分隔的）类：

selector$.removeClass("font1 font2 font3 fontx");

如果您乐意删除所有类，无论您是否通过格式化按钮添加它们，都可以执行以下操作：

selector$.removeClass();

Answer 7

这是一段代码，其中有一个示例，它将向您展示如何解决此问题。我假设您只想删除与特定格式匹配的类（即字体##格式）。

您可以向jQuery的对象添加一个函数，该函数可以在jQuery对象上调用。然后，此函数将检查元素包含的类列表，并将它们中的每一个与您的模式相匹配。

(function($) {
    $.fn.removeMatchingClasses = function(expression) {
        var $element    = $(this);
        var classString = $element.attr('class');
        if(classString !== undefined) {
            $(classString.split(' ')).each(function() {
                var str = (this + '');
                if(str.match(expression)) {
                    $element.removeClass(str);
                }
            });
        }
    };
})(jQuery);

$(document).ready(function() {
    $("span").each(function() {
        // remove all classes from this element matching font(number)
        $(this).removeMatchingClasses(/^font([0-9]+)$/);
    });
});

此代码将保留元素的所有非匹配类，并仅删除匹配的类。

一些参考文献：

https://api.jquery.com/attr/（用于确定课程）
http://www.w3schools.com/jsref/jsref_match.asp（用于将类与模式匹配）

如何使用jQuery删除所有类？

7 个答案: