Получение имени класса и ID элемента через jQuery

Быстрый ответ

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

var className = $('#elementId').attr('class');
// Допустим, у нас есть элемент с id="myDiv":
var className = $('#myDiv').attr('class'); // Вернет "targetClass"

Несколько классов? Не проблема!

Если у элемента приписано несколько классов, их просто преобразовать из строки в массив с помощью такого способа .attr('class').split(' '):

var allClassesArray = $('#elementId').attr('class').split(' '); // Это тем интереснее, чем больше у вас классов

Так, мы имеем массив из названий классов, с которыми можно взаимодействовать по воле.

Проверь, прежде чем вносить изменения

Приступая к изменению какого-либо класса, обязательно проверьте его наличие на элементе с помощь этого метода .hasClass():

if ($('#elementId').hasClass('targetClass')) {
    // У элемента есть класс 'targetClass', теперь можно принимать действия.
}

Этот тип проверки является эффективным и избавляет от необходимости анализировать весь список классов.

Обработка событий и доступ к классам

В ситуациях, когда вы работаете с обработчиками событий jQuery, имена классов можно извлечь через обычный JavaScript:

$('#elementId').click(function() {
    var classNames = this.className; // Здесь мы используем нативный JavaScript!
    var id = this.id; // И получаем идентификатор элемента
});

В этом случае this ссылается на DOM-элемент, что позволяет взаимодействовать с его свойствами, в частности, className и id.

Расширенный выбор целей

В более сложных случаях, мы можем, к примеру, выбрать конкретный div внутри другого элемента, применяя сочетание селекторов и фильтров jQuery:

var fifteenthDivClass = $('#sidebar div:eq(14)').attr('class'); // Получаем класс пятнадцатого div

Этот метод даёт возможность получить класс пятнадцатого div, учитывая, что в jQuery нумерация начинается с ноля.

Визуализация

Предположим, у нас есть ряд элементов 👚, 👖, 👗, 👔, в котором каждая иконка символизирует HTML-элемент, а класс, который мы хотим изучить, обозначает стиль:

Стили (классы):        👚 : 'casual'
                        👖 : 'denim'
                        👗 : 'evening'
                        👔 : 'business'

С помощью jQuery мы посылаем системе запрос, чтобы узнать, какой класс соответствует определенному стилю:

$('.evening').attr('class');
// И система отвечает: "Этот стиль – 'evening'"

Использование современного JavaScript для доступа к классу и ID

Если вы любите использовать самые новые возможности JavaScript без применения jQuery, вот как можно достичь тех же результатов:

const element = document.querySelector('#elementId');
const classNames = element.className; // Красиво и просто!
const id = element.id; // И точно до последнего момента

Чтобы получить перечень всех классов:

const classListArray = Array.from(element.classList); // И все у вас в руках!

Эти нативные свойства DOM поддерживаются большинством браузеров и являются отличной альтернативой для управления элементами DOM без jQuery.

Получение актуальных (динамических) данных класса

В ситуациях, когда классы динамически меняются, крайне важно получать свежую информацию о них. Всегда запрашивайте данные классов в обработчике событий или в методе:

$('#elementId').click(function() {
    var classNames = this.className; // Так информация будет точной и актуальной.
});

Создание селекторов jQuery из классов

Тут мы учимся преобразовывать классы элемента в селектор jQuery:

const selector = '.' + $('#myDiv').attr('class').split(' ').join('.'); // Превращаем классы в волшебный селектор!

Используя этот код, вы объедините все классы точкой, что упрощает поиск элементов с аналогичным набором классов.

Работа с функцией .attr() помимо классов

Функция .attr() является универсальным инструментом, который дает возможность работать с любыми атрибутами:

var typeAttr = $('#myInput').attr('type'); // Теперь за мной и моими атрибутами! ;-)

Возможности .attr() не ограничиваются работой только с классами — эта функция незаменима для доступа к атрибутам в jQuery.

Полезные материалы

1. .attr() | Документация API jQuery — подробное объяснение метода .attr().
2. .prop() | Документация API jQuery — описание метода .prop(), бывает полезным при работе со свойствами.
3. "Свежие вопросы 'jquery+get+class' – Stack Overflow" — вопросы и ответы на тему получения классов с помощью jQuery.
4. Element: свойство className – Web API | MDN — официальная документация по className.
5. Element: свойство classList – Web API | MDN — официальная документация по classList.
6. Изучаем jQuery | Codecademy — курс Codecademy, который поможет вам увлубиться в изучение jQuery и работы с HTML-элементами.