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