Rated articles


View all rated articles

Login / Sign Up


Enter site:
Login: 
Password: 

First time here?
 
Register [?]:
Registering allows you:
  • Purchase products from the product catalog and access them any time.
  • Ask questions to another specialists in IT
  • Publish your own Joomla extensions, soft or other products if you are developer or distributor
  • Add interesting weblinks and access them from any place
  • Watch the updates of the site and have special abilities that guests don't have
  • Watch the news of the service and new articles and get knowledge
Choose login:
Your Email:
Enter the result of operation (in digits):
15 - 6 = ? Update
jQuery - метод hasClass(), или проверяем наличие класса у элемента PDF Print E-mail
Written by Максим   
Friday, 27 April 2012 09:57
Liked:
69


Did not like: 11

Доброго времени суток, уважаемые дамы и господа! В этой совсем небольшой статье я расскажу, как с помощью 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:
 
 


Last Updated on Wednesday, 13 June 2012 13:38
 
Автор статьи: Damascus
Всего статей: 62
Рейтинг: 3111
Страница Google+: Google

Found Error?

Система Orphus

Payment Methods

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

Site Statistics

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

Our Pages


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.