Постановка задачи: есть элемент страницы у которого есть много классов, необходимо удалить из этого списка классы которые попадают под определенный шаблон. Необходимо удалить те имена классов которые содержать суффикс "-find".
<div class="class1 class2 class-find test-find class3" id="div1">some content</div>
Я предлагаю два способа решения задачи: первый способ заключается в том, чтобы получить массив классов, пройти по нему последовательно сравнивая элементы с заданным шаблоном, второй способ заключается в том, чтобы сразу искать совпадения классов шаблонов по строке (если к тегу применяется несколько классов, то они разделяются пробелами)
Пример 1:
$.fn.removeClassesByPattern = function(pattern) {
var el = $(this);
var items = [];
var re = new RegExp(pattern);
$.each(el.attr('class').split(/\s+/), function(index, item){
if(re.test(item)){
items.push(item);
}
});
el.removeClass(items.join(' '));
return el;
}
Использование:
$("#div1").removeClassesByPattern(/-find/);
Пример 2
$.fn.removeClassesByPattern2 = function(pattern) {
var el = $(this);
el.removeClass(function (index, _class) {
var matches = _class.match (pattern) || [];
return (matches.join(' '));
});
return el;
}
Использование:
$("#div1").removeClassesByPattern2(/\s?(\w+-find)/);
Как видно на примерах - оба способа работают неодинаково. В первом случае мы проводим поиск по именам классов и сравниваем их с шаблоном на предмет соответствия. Второй способ заставляет нас писать шаблон поиска названий классов, таким образом шаблон получился значительно сложнее если сравнивать с примером 1. Но в тоже самое время, второй способ позволяет более гибко находить совпадение (если вы владеете регулярными выражениями в нужной степени).
Какой способ использовать - зависит от поставленной задачи.
Примечания:
- функция removeClass() принимает либо единичное имя класса, либо список имен разделенных пробелами
- каждая из функций в конце работы возвращают элемент к которому она применяется. Таким образом, мы можем дальше выполнять цепочку вызовов