jQuery - метод hasClass(), или проверяем наличие класса у элемента
В этой совсем небольшой статье я расскажу, как с помощью jQuery проверить наличие класса у элемента. Любой HTML-элемент всегда может иметь более одного класса. Все классы, назначенные элементу, перечисляются через пробел в атрибуте class элемента...
В этой совсем небольшой статье я расскажу, как с помощью jQuery проверить наличие класса у элемента. Любой HTML-элемент всегда может иметь более одного класса. Все классы, назначенные элементу, перечисляются через пробел в атрибуте class элемента, как показано ниже:
<div id="myPanel"></div>
В этом примере для DIV-элемента установлено два класса - sizeable и draggable. Если нам необходимо проверить, задан ли определенный класс для какого-то элемента, то на jQuery это делается с помощью метода hasClass(). Так, если мы хотим узнать, есть ли у нашего DIV-а класс sizeable, мы делаем следующую проверку:
if ( $("#myPanel").hasClass("sizeable") ) { alert("У элемента задан класс sizeable!"); }
После выполнения этого кода на экран будет выведено сообщение "У элемента задан класс sizeable!". Иногда начинающим разработчикам jQuery хочется использовать метод attr() библиотеки jQuery, чтобы сравнить значение атрибута class элемента с каким-то классом, что в корне неверно. Например, следующий код написан неправильно:
if ( $("#myPanel").attr("class") == "sizeable" ) { // сюда мы никогда не попадем! alert("Это сообщение не отобразится, т.к. нельзя проверять наличие класса у элемента с помощью метода attr()!"); }
Никогда не проверяйте наличие класса у элемента с помощью метода attr()! Этот код не будет работать. Всегда используйте метод hasClass()
Поскольку по спецификации HTML у любого элемента может быть несколько классов, то вполне понятно, почему attr() здесь не срабатывает - этот метод используется для чтения или установки тех атрибутов элемента, которые имеют единственное значение. Такими могут быть, например, атрибуты id, title и т.д. Если необходимо проверить наличие нескольких классов у элемента, придется использовать метод hasClass() для проверки каждого класса. Например, если мы хотим узнать, заданы ли оба класса у элемента, то используем следующий код:
if ( $("#myPanel").hasClass("sizeable") && $("#myPanel").hasClass("draggable") ) { alert("У элемента заданы оба класса: sizeable и draggable!"); }
Если же хотим проверить наличие хотя бы одного из двух классов, то проверяем так:
if ( $("#myPanel").hasClass("sizeable") || $("#myPanel").hasClass("draggable") ) { alert("У элемента задан какой-то из классов: sizeable или draggable!"); }