jQuery removeClass()但保留某些类

Question

如何从一个元素中删除除某些类之外的所有类。 我假设我们不能在removeClass()中使用not。 假设我有一个<div class =“aa bb cc dd ee ff”></div>，我想删除除aa dd之外的所有类。 我该怎么做。

- Pinkie

---

仅将类设置为“aa dd”不就足够了吗？ - alf

@pinkie 这些答案有帮助吗？ - Laurence Burke

Answer 1

你为什么不直接用这样的方式替换class属性为你想要的类名呢？

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

- Laurence Burke

Answer 2

为了让它更加简洁，您可以创建一个小扩展程序。

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

然后你可以像这样使用它

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

这是一个例子：http://jsfiddle.net/9xhND/ 更新

根据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
    });
};

- Tim Banks

---

这个插件和我的逻辑结合起来将是完美的解决方案。但我担心<div class="a b c d f">和$('div').removeClassExcept('d e')会添加一个从未存在过的e类。 - Brad Christie

你说得对。如果之前没有“e”，那么它将被添加。对于操作者的情况可能并不重要。我会添加一个更新，使两个版本都可用。 - Tim Banks

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

- Gabriele Petrioli

---

我喜欢这个解决方案。比删除所有类更漂亮。 - Benoît

@Benoît 大多数情况下，最简单的答案总是最好的答案... KISS!! - Laurence Burke

@Laurence Burke：是的，但在您的解决方案中，如果只有aa类，它将添加dd！ - Benoît

@Benoît 在不同的讨论和回答中，我们谈到了这个问题。原帖并没有明确指出只有在类已经存在的情况下才需要保留它。如果是这样的话，那么原帖作者就不会选择我的答案作为正确答案了。但这并不意味着在其他情况下我的答案比其他人发布的更好。这又回到了我之前的评论：“大多数情况下”... - Laurence Burke

@Laurence Burke：问题是“我想删除除aa dd之外的所有类”。你的答案并没有做到这一点。也许你的答案对Pinkie来说是合适的（那么问题就不是好问题了，如果其他人有相同的问题，你的答案也不能帮助他）。 - Benoît

Answer 4

您可以删除所有内容，然后添加需要的内容回来：

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

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

- Sarfraz

---

假设原始数据中都有aa和dd。只保留它们需要更多的工作（只需检查哪个存在，并仅在之前存在时添加它们回去）。 - Dan Davies Brackett

@DanDaviesBrackett：没错，这正是OP的示例代码所展示的 :) 不过Laurence提供了更聪明的答案。 - Sarfraz

Answer 5

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

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

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

可以在这里查看演示：http://jsfiddle.net/sr86u/3/

- jbyrd

Answer 6

一种方法是只使用你想要保留的类名来覆盖所有类名。所以，如果你的 div 元素有一个 id 为 "myDiv"，那么你可以这样做：

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

- jbyrd

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

- Brad Christie