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

Question

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

Answer 1

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

$('#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/

ОБНОВЛЕНИЕ

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

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

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

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

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

Answer 5

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

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

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

Answer 6

Если вы знаете, какие классы вы хотите сохранить, вы можете просто добавить их заново (как уже показали другие).

Я предполагаю, что неизвестно, применяются ли эти классы, поэтому я сделаю еще один шаг:

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

Answer 7

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

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