Узнать класс HTML элемента с помощью 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, но с помощью этого метода можно получить значение атрибутов. Если элемент имеет один класс, то мы можем получить его и использовать без дополнительных действий.

var classData = $("#blockId").attr("class");
alert(classData);

Но если элемент имеет несколько классов, то нужно разбить полученную строку на массив:

var theClasses = classData.match(/\w+|"[^"]+"/g);

С помощью этого метода можно узнать и получить значение любого атрибута.


Об авторе

Занимаюсь программированием уже более 7 лет. Часто использую JavaScript (Node.js) и Python.

Комментарии