Вход / Регистрация


Вход на сайт:
Логин: 
Пароль: 


Впервые здесь?
 
Регистрация [?]:
Регистрация у нас позволит:
  • Покупать платные продукты из каталога и иметь к ним доступ в любое время
  • Задавать вопросы другим людям, участвовать в дискуссиях
  • Публиковать свои расширения, программы и софт, если Вы разработчик или дистрибьютор
  • Добавлять интересные ссылки и иметь к ним доступ из любой точки, где есть выход в Интернет
  • Следить за обновлениями сервиса и получать дополнительные возможности, которых не имеют обычные гости
  • Следить за новыми статьями и получать новые знания
Выберите логин:
Ваш Email:
Введите результат выполнения операции (цифрами):
12 + 6 = ? Обновить

jQuery - метод hasClass(), или проверяем наличие класса у элемента PDF Печать E-mail
Автор: Максим   
27.04.2012 09:57
Понравилось:
79


Не понравилось: 13
Недоступен ни один перевод.

Доброго времени суток, уважаемые дамы и господа! В этой совсем небольшой статье я расскажу, как с помощью jQuery проверить наличие класса у элемента. Любой HTML-элемент всегда может иметь более одного класса. Все классы, назначенные элементу, перечисляются через пробел в атрибуте class элемента, как показано ниже:

 

	 

	<div id="myPanel" class="sizeable draggable"></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!");

	}

	 

	
 

Демо

Я решил для наглядности привести демонстрацию работы приведенных выше кусков кода. Как уже понятно, будут выведены подряд три сообщения. Чтобы увидеть результат работы, перейдите на вкладку Result:
 
 

Обновлено 13.06.2012 13:38
 

Нашли ошибку?

Система Orphus

Оплата на сайте

Яндекс.Деньги
www.megastock.ru
Здесь находится аттестат нашего WM идентификатора 207935874510
Проверить аттестат

Статистика сайта

Яндекс.Метрика

Мы в Интернете


Allineed.Ru © 2009-2012 - Allineed.Ru - ответы на IT вопросы, статьи о разработке, IT и программном обеспечении. При использовании материалов сайта ссылка обязательна. Использование данного сайта и любой его части означает принятие условий Пользовательского Соглашения.
Allineed.Ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.