jQuery removeClass() 但不是某些类

Question

如何从元素中删除除某些类之外的所有类。我假设我们不能将 not 与 removeClass() 一起使用。假设我有一个

并且我想删除除 aa dd 之外的所有类。我该怎么办呢。

Answer 1

为什么不将 class 属性替换为您想要的类，如下所示

$('#yourElement').attr('class',"aa dd");

Answer 2

为了使其更简洁，您可以创建一个小扩展。

jQuery.fn.removeClassExcept = function (val) {
    return this.each(function () {
        $(this).removeClass().addClass(val);
    });
};

一样使用它

$("selector").removeClassExcept("aa dd");

然后你可以像下面的例子

： http://jsfiddle.net/9xhND/ UPDATE

使用 Brad Christie 的逻辑，更新将现在只保留原来存在的类，而不添加新的类。 http://jsfiddle.net/9xhND/1/

jQuery.fn.removeClassExcept = function (val) {
    return this.each(function (index, el) {
        var keep = val.split(" "),  // list we'd like to keep
        reAdd = [],          // ones that should be re-added if found
        $el = $(el);       // element we're working on
        // look for which we re-add (based on them already existing)
        for (var c = 0; c < keep.length; c++){
          if ($el.hasClass(keep[c])) reAdd.push(keep[c]);
        }

        // drop all, and only add those confirmed as existing
        $el
          .removeClass()               // remove existing classes
          .addClass(reAdd.join(' '));  // re-add the confirmed ones
    });
};

Answer 3

.removeClass() 接受一个函数作为参数，该函数将返回要实际删除的类..

所以

$('div').removeClass(function(i, class){
    // variable class hold the current value of the class attribute
    var list = class.split(' '); // we create an array with the classes
    return  list.filter(function(val){ // here we remove the classes we want to keep
        return (val != 'aa' && val != 'dd');
    }).join(' '); // and return that list as a string which indicates the classes to be removed..
});

Answer 4

您可以删除所有类并重新添加所需的类：

$('#divID').removeClass()
   .addClass('aa dd'); // add multiple classes by separating with space

注意：在不指定特定类名的情况下调用 removeClass() 会删除所有类。

Answer 5

jQuery 实际上为removeClass 方法提供了一个回调参数，因此您可以使用一个简单的javascript 正则表达式来返回除您不想删除的类之外的所有类：

$('#myDiv').removeClass(function() {
    return $(this).attr('class').replace(/aa|bb/g, '');
});

这样您就不会添加类“aa”和“bb” ' 如果它们还不存在。

您可以在此处查看其实际效果：http://jsfiddle.net/sr86u/3/

Answer 6

一种方法是用您想要保留的类覆盖所有类。因此，如果您的 div 的 id 为“myDiv”，那么您可以执行以下操作：

$('#myDiv').attr('class', 'aa dd');

Answer 7

如果您知道要保留哪些类，您可以重新添加它们（正如其他人已经展示的那样）。

我假设不知道这些类是否已经应用，所以我会更进一步：

var keep = ['aa','bb'],  // list we'd like to keep
    reAdd = [],          // ones that should be re-added if found
    $el = = $(el);       // element we're working on

// look for which we re-add (based on them already existing)
for (var c = 0; c < keep.length; c++){
  if ($el.hasClass(keep[c])) reAdd.push(keep[c]);
}

// drop all, and only add those confirmed as existing
$el
  .removeClass()               // remove existing classes
  .addClass(reAdd.join(' '));  // re-add the confirmed ones