Проверка наличия класса

Umbrella JS — это легкая и удобная библиотека для работы с DOM, предоставляющая методы, аналогичные jQuery, но с минимальным весом. Одной из часто используемых операций при работе с элементами является проверка наличия определённого класса у DOM-узла. Umbrella JS реализует это через метод .hasClass().

Синтаксис метода .hasClass()

u('селектор').hasClass('имя_класса')
  • селектор — CSS-селектор, определяющий набор элементов.
  • имя_класса — строка с именем класса, наличие которого проверяется.

Метод возвращает булево значение: true, если хотя бы один элемент из набора содержит указанный класс, и false, если ни один элемент не соответствует условию.

Примеры использования

  1. Проверка одного элемента по идентификатору
if (u('#menu').hasClass('active')) {
    console.log('Меню активно');
} else {
    console.log('Меню не активно');
}
  1. Проверка элементов по классу
if (u('.item').hasClass('highlighted')) {
    console.log('Есть выделенные элементы');
}

Здесь u('.item') может выбрать несколько элементов. Метод .hasClass() вернёт true, если хотя бы один элемент содержит класс highlighted.

Особенности работы с несколькими классами

Метод .hasClass() не поддерживает проверку сразу нескольких классов через пробел. Если необходимо проверить наличие нескольких классов, нужно вызывать метод отдельно для каждого:

let element = u('#box');

if (element.hasClass('visible') && element.hasClass('selected')) {
    console.log('Элемент видим и выбран');
}

Совместимость с другими методами Umbrella JS

Проверка класса часто используется совместно с методами добавления и удаления классов:

  • addClass('имя_класса') — добавление класса.
  • removeClass('имя_класса') — удаление класса.
  • toggleClass('имя_класса') — переключение класса.

Пример комбинации:

let button = u('#toggleButton');

if (button.hasClass('active')) {
    button.removeClass('active');
} else {
    button.addClass('active');
}

Работа с динамическими элементами

Umbrella JS выбирает элементы в момент вызова селектора. Если элементы создаются динамически после инициализации скрипта, для корректной проверки необходимо повторно выполнять селектор:

u('#container button').forEach(btn => {
    if (u(btn).hasClass('enabled')) {
        console.log('Кнопка доступна');
    }
});

Здесь метод forEach используется для обхода всех выбранных кнопок, а u(btn).hasClass('enabled') проверяет класс для каждого отдельного элемента.

Рекомендации по использованию

  • Использовать точные селекторы для минимизации количества проверяемых элементов.
  • Для проверки множественных условий создавать отдельные проверки через логические операторы && или ||.
  • Не смешивать метод .hasClass() с прямой манипуляцией classList без необходимости, чтобы сохранить единообразие кода.

Сравнение с нативным JavaScript

Аналогичная проверка на классы без Umbrella JS выполняется через element.classList.contains('имя_класса'). Umbrella JS упрощает работу с множеством элементов и позволяет писать более компактный и читаемый код при работе с коллекциями DOM-узлов.

// Нативно
let box = document.getElementById('box');
if (box.classList.contains('visible')) {
    console.log('Элемент видим');
}

// Umbrella JS
if (u('#box').hasClass('visible')) {
    console.log('Элемент видим');
}

Umbrella JS автоматически обрабатывает набор элементов, что делает его особенно удобным для работы с коллекциями.

Оглавление