Постановка задачи: есть элемент страницы у которого есть много классов, необходимо удалить из этого списка классы которые попадают под определенный шаблон. Необходимо удалить те имена классов которые содержать суффикс "-find".
some content
Я предлагаю два способа решения задачи: первый способ заключается в том, чтобы получить массив классов, пройти по нему последовательно сравнивая элементы с заданным шаблоном, второй способ заключается в том, чтобы сразу искать совпадения классов шаблонов по строке (если к тегу применяется несколько классов, то они разделяются пробелами)
Пример 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() принимает либо единичное имя класса, либо список имен разделенных пробелами
- каждая из функций в конце работы возвращают элемент к которому она применяется. Таким образом, мы можем дальше выполнять цепочку вызовов
Примечания:
- функция removeClass() принимает либо единичное имя класса, либо список имен разделенных пробелами
- каждая из функций в конце работы возвращают элемент к которому она применяется. Таким образом, мы можем дальше выполнять цепочку вызовов
Комментариев нет:
Отправить комментарий