Справочник API
.hasClass() в jQuery
Содержание статьи
-
Категории: Attributes , Manipulation › Class Attribute , CSS
Позволяет определить, имеется ли класс с указанным именем хотя бы у одного элемента в наборе jQuery.
Синтаксис и описание:
Добавлено в jQuery 1.2.hasClass( className )
Команда .hasClass() проверяет, есть ли у хотя бы одного элемента набора jQuery указанный класс (или указанная последовательность классов), и возвращает логическое значение.
Возвращаемое значение: (boolean — логическое значение) true, если хотя бы один элемент набора содержит указанный класс.
Параметры:
className – (строка) Имя класса для проверки.
Примечание:
Элемент может иметь несколько классов, перечисленных в атрибуте
classчерез пробел. Строку className можно передать и как несколько слов через пробел сразу — но важно понимать, как именно она проверяется (см. следующее примечание), это частый источник ошибок.Примечание:
Порядок важен. Внутри .hasClass() собирает список классов элемента в одну строку вида
" class1 class2 "и ищет там переданную строку className (обёрнутую пробелами) как подстроку. Поэтому$(el).hasClass('foo bar')вернётtrue, только еслиfooиbarидут в атрибутеclassименно подряд и именно в этом порядке (например,class="x foo bar y"). Если у элементаclass="bar foo"— при вызовеhasClass('foo bar')результат будетfalse, хотя оба класса присутствуют. Чтобы проверить набор классов независимо от их порядка, проверяйте по одному:$(el).hasClass('foo') && $(el).hasClass('bar').Примечание:
Нативный аналог —
element.classList.contains(className)— принимает ровно одно имя класса за вызов и не поддерживает строку с пробелом как аргумент; чтобы проверить несколько классов, нативноclassList.contains()нужно вызывать отдельно для каждого имени (это же и есть надёжный способ не зависеть от порядка классов).В jQuery 3.x и 4.0:
Метод не помечен deprecated и не менялся — работает одинаково в jQuery 1.2–4.0. Для нового кода на чистом JS равноценная и чуть более быстрая замена —
classList.contains(); подробнее о выборе между jQuery и нативным JS — в статье jQuery или чистый JavaScript.
Примеры:
Проверка одного класса.
if ($('#panel').hasClass('is-open')) { $('#panel').removeClass('is-open'); }Ловушка с порядком классов при передаче нескольких имён сразу.
// <div id="card" class="card featured"></div> $('#card').hasClass('card featured'); // true — порядок совпадает $('#card').hasClass('featured card'); // false — порядок другой, хотя оба класса есть // Надёжный способ, не зависящий от порядка: var hasBoth = $('#card').hasClass('card') && $('#card').hasClass('featured'); // trueНативный аналог на
classListбез jQuery.var el = document.getElementById('card'); var hasBothNative = el.classList.contains('card') && el.classList.contains('featured');