Главная » 2011 » Июнь » 10 » jQuery. Как найти и удалить класс по паттерну
23:52
jQuery. Как найти и удалить класс по паттерну
Постановка задачи: есть элемент страницы у которого есть много классов, необходимо удалить из этого списка классы которые попадают под определенный шаблон. Необходимо удалить те имена классов которые содержать суффикс "-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() принимает либо единичное имя класса, либо список имен разделенных пробелами
- каждая из функций в конце работы возвращают элемент к которому она применяется. Таким образом, мы можем дальше выполнять цепочку вызовов



Просмотров: 1064 | Добавил: Sergey Saenko | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *: