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

В библиотеке Dom7 работа с классами элементов является одной из ключевых возможностей для манипуляции DOM. Проверка наличия класса позволяет определить, содержит ли элемент определённый CSS-класс, что важно для условий отображения, применения стилей или запуска событий.

Метод hasClass()

Метод hasClass(className) используется для проверки наличия конкретного класса у выбранного элемента или группы элементов.

Синтаксис:

$(selector).hasClass(className)
  • selector — строка CSS-селектора или объект Dom7.
  • className — имя класса, которое нужно проверить.
  • Возвращает true, если хотя бы один элемент из выбранных содержит указанный класс, и false, если класс отсутствует у всех элементов.

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

var items = $('.list-item');

if (items.hasClass('active')) {
    console.log('Есть хотя бы один активный элемент');
} else {
    console.log('Активных элементов нет');
}

В этом примере проверка производится сразу на всех элементах с классом .list-item. Если хотя бы один из них содержит класс active, метод возвращает true.

Проверка для отдельных элементов

Хотя Dom7 возвращает коллекцию элементов, часто необходимо проверить конкретный элемент по индексу:

var firstItem = $('.list-item').eq(0);

if (firstItem.hasClass('selected')) {
    console.log('Первый элемент выбран');
}

Метод eq(index) возвращает объект Dom7, содержащий один элемент по указанному индексу, после чего можно вызвать hasClass() для проверки конкретного элемента.

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

В нативном JS аналогичная операция выполняется через classList.contains():

var firstItem = document.querySelector('.list-item');
if (firstItem.classList.contains('selected')) {
    console.log('Первый элемент выбран');
}

Dom7 упрощает работу с коллекциями элементов, избавляя от необходимости перебора каждого элемента вручную.

Практические сценарии использования

  1. Управление состоянием элементов интерфейса Проверка класса позволяет определить, находится ли элемент в активном состоянии, выбран ли пункт меню или включён ли переключатель:

    var button = $('.toggle-button');
if (!button.hasClass('disabled')) {
    button.addClass('active');
}

  2. Условная анимация или изменение стиля Перед запуском анимации или применения нового стиля проверяется наличие класса, чтобы избежать повторного запуска:

    var modal = $('#modal');
if (!modal.hasClass('open')) {
    modal.addClass('open').fadeIn();
}

  3. Фильтрация элементов С помощью hasClass можно отобрать элементы по состоянию:

    var selectedItems = $('.item').filter(function() {
    return $(this).hasClass('selected');
});

Особенности Dom7

  • Метод hasClass() возвращает булево значение только для всей коллекции элементов, то есть достаточно одного элемента с нужным классом для получения true.
  • Dom7 автоматически работает с пустыми коллекциями, возвращая false, если элементов нет.
  • Проверка чувствительна к регистру — hasClass('Active') не равно hasClass('active').

Оптимизация и рекомендации

  • При проверке на наличие класса в цикле элементов лучше использовать цепочку методов Dom7 вместо нативного перебора:
$('.item').each(function(el) {
    if ($(el).hasClass('highlight')) {
        $(el).removeClass('highlight');
    }
});
  • Если требуется проверять множество классов одновременно, следует вызывать hasClass отдельно для каждого, так как метод поддерживает только один класс за раз:
if ($(el).hasClass('visible') && $(el).hasClass('enabled')) {
    console.log('Элемент видим и активен');
}
  • Для динамически создаваемых элементов метод работает сразу после добавления их в DOM, поскольку Dom7 оперирует актуальной коллекцией элементов на момент выбора.
Оглавление