пятница, 10 июня 2011 г.

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() принимает либо единичное имя класса, либо список имен разделенных пробелами
- каждая из функций в конце работы возвращают элемент к которому она применяется. Таким образом, мы можем дальше выполнять цепочку вызовов



Комментариев нет:

Отправить комментарий