Jquery получить класс элемента

Узнать класс HTML элемента с помощью jQuery 5 (100%) 3 votes

В этом статье я расскажу как можно узнать класс HTML элемента по его ID или проверить, есть ли такой класс у элемента. Кроме того, что мы можем узнать и взять class элемента, мы можем с помощью данного метода узнать и получить любой другой атрибут элемента.

Проверка класса элемента

Как мы знаем все HTML элементы могут иметь атрибут class, который может иметь несколько значение перечисленные пробелом.

<!DOCTYPE html> <html lang=»ru»> <head> <meta charset=»utf-8″> <meta http-equiv=»X-UA-Compatible» content=»IE=edge»> <meta name=»viewport» content=»width=device-width, initial-scale=1″> <title>Мой сайт</title> </head> <body> <div id=»blockId» class=»myClass1 myClass2″>Здесь могут быть вложенные HTML элементы.</div> <!— Подключаем библиотеку jQuery —> <script src=»./jquery.min.js»></script> <!— Подключаем наш файл скриптов —> <script src=»./script.js»></script> </body> </html>

И так, у нас в HTML коде есть элемент div, который имеет два класса — myClass1, myClass2. У нас есть задача — проверить с помощью jQuery есть ли у элемента определенный класс по его ID. Это можно сделать с помощью метода .hasClass(). Например, если мы хотим узнать есть ли у элемента класс myClass2, то мы делаем следующую проверку.

if ( $(«#blockId»).hasClass(«myClass2») ) { alert(«У элемента задан класс myClass2!»); }

Метод .hasClass() всегда возвращает значение типа boolean. То есть, если у нас есть такой класс, то будет возвращен булевое значение true и проверка пройдет успешно. В нашем случае мы увидим сообщение «У элемента задан класс myClass2!».

Очень часто начинающие разработчики используют метод .attr() для проверки / сравнение классов. Но данный метод проверки будет работать неправильно, если атрибут класс имеет несколько значение. Пример кода ниже написан неправильно.

if ( $(«#blockId»).attr(«class») == «myClass2» ) { alert(«Неправильный вариант проверки!»); }

Узнать / получить значение класса элемента

Выше я уже рассказал, что с помощью метода .attr() нельзя проверить или сравнить значение атрибут class, но с помощью этого метода можно получить значение атрибутов. Если элемент имеет один класс, то мы можем получить его и использовать без дополнительных действий.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *