JQuery removeClass(), но не определенные классы

Как я могу удалить все классы из элемента, кроме определенных классов. Я предполагаю, что мы не можем использовать не с removeClass(). Скажем, у меня есть <div class="aa bb cc dd ee ff"></div>, и я хочу удалить все классы, кроме aa dd. Как я могу это сделать.

Ответ 1

Почему бы вам просто не заменить атрибут класса теми классами, которые вы хотите так

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

Ответ 2

Чтобы сделать его немного чище, вы можете создать небольшое расширение.

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

Тогда вы можете использовать его как

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

Вот пример: http://jsfiddle.net/9xhND/

ОБНОВЛЕНИЕ

Используя логику Брэда Кристи, обновление теперь будет только содержать классы, которые изначально были там, а не добавлять новые классы. 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
    });
};

Ответ 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..
});

Ответ 4

Вы можете удалить все и добавить нужные обратно:

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

Примечание. Вызов removeClass() без указания определенного имени класса удаляет все классы.

Ответ 5

jQuery фактически предоставляет параметр обратного вызова методу removeClass, поэтому вы можете использовать простое регулярное выражение javascript для возврата всех классов, кроме тех, которые вы не хотите удалять:

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

Таким образом, вы не добавляете классы 'aa' и 'bb', если они еще не существуют.

Вы можете увидеть это в действии здесь: http://jsfiddle.net/sr86u/3/

Ответ 6

Один из способов сделать это - просто перезаписать все классы классом (ами), который вы хотите сохранить. Итак, если ваш div имеет идентификатор "myDiv", вы можете сделать следующее:

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

Ответ 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