Методы has и hasClass библиотеки jQuery

Reading time ~1 minute

Два очень похожих метода библиотеки jQuery, служащих для фильтрации выборки - метод .has() и метод .hasClass().

И действительно, оба этих метода похожи между собой. Чтобы было понятно, лучше сразу перейду к примерам.

Метод .has()

Метод .has() фильтрует элементы, имеющие в своем составе указанные в .has() селекторы.

Простой пример:

$(li).has(a).addClass(active);

То есть: всем элементам li, имеющим в качестве потомков (в своем составе) элемент a, присвоить класс .active.

На лицо, как бы это сказать, обратная фильтрация - справа налево. Обычно все методы библиотеки jQuery работают слева направо.

Этот метод чем-то похож на метод .parent(). В качестве примера рассмотрим такой вариант:

$(a).parent(li).addClass(active);

… что читается таким образом: всем элементам li, являющимся родителями элементов a, присвоить класс .active.

Напомню, что метод .has() работает именно с селекторами и имеет такой синтаксис:

.has(selector)

Метод .hasClass()

Метод .hasClass() очень похож по принципу действия на предыдущий метод has() - но это только кажущееся впечатление.

Во-первых, как понятно из имени метода .hasClass(), что он работает с классами, а не селекторами.

То есть, синтаксис метода .hasClass() таков:

.hasClass(class)

Во-вторых, метод .hasClass() возвращает логическое true или false, в отличие от метода .has(), который возвращает массив объектов, доступных для дальнейшей обработки.

Простой пример:

if ($(li).hasClass(active)) {
  $(li).find(a).addClass(activeLink);
} else {
  $(li).find(a).addClass(inactiveLink);
}

… что читается таким образом: если элементы li имеют класс .active, то всем элементам a, являющимся потомками элементов li, присвоить класс .activeLink; иначе всем элементам a присвоить класс .inactiveLink.

Стоит обратить внимание, что в случае метода .hasClass() имеет место быть обычный способ фильтрации элементов - слева направо; выборка сужается по мере появления новых условий.

Вот такая картина получается, с двумя этими методами - .has() и .hasClass.

На этом все.


Различие между exports и module.exports

Попытка разобраться, в чем различие между exports и module.exports, основанная на статье Understanding module.exports ...Continue reading

Комментарии

Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке