jQuery - метод hasClass(), или проверяем наличие класса у элемента | ![]() | ![]() | ![]() |
Written by Максим |
Friday, 27 April 2012 09:57 |
Liked: 79 Доброго времени суток, уважаемые дамы и господа! В этой совсем небольшой статье я расскажу, как с помощью jQuery проверить наличие класса у элемента. Любой HTML-элемент всегда может иметь более одного класса. Все классы, назначенные элементу, перечисляются через пробел в атрибуте class элемента, как показано ниже: В этом примере для DIV-элемента установлено два класса - sizeable и draggable. Если нам необходимо проверить, задан ли определенный класс для какого-то элемента, то на jQuery это делается с помощью метода hasClass(). Так, если мы хотим узнать, есть ли у нашего DIV-а класс sizeable, мы делаем следующую проверку: После выполнения этого кода на экран будет выведено сообщение "У элемента задан класс sizeable!". Иногда начинающим разработчикам jQuery хочется использовать метод attr() библиотеки jQuery, чтобы сравнить значение атрибута class элемента с каким-то классом, что в корне неверно. Например, следующий код написан неправильно: Никогда не проверяйте наличие класса у элемента с помощью метода attr()! Этот код не будет работать. Всегда используйте метод hasClass() Поскольку по спецификации HTML у любого элемента может быть несколько классов, то вполне понятно, почему attr() здесь не срабатывает - этот метод используется для чтения или установки тех атрибутов элемента, которые имеют единственное значение. Такими могут быть, например, атрибуты id, title и т.д. Если необходимо проверить наличие нескольких классов у элемента, придется использовать метод hasClass() для проверки каждого класса. Например, если мы хотим узнать, заданы ли оба класса у элемента, то используем следующий код: Если же хотим проверить наличие хотя бы одного из двух классов, то проверяем так: Демо Я решил для наглядности привести демонстрацию работы приведенных выше кусков кода. Как уже понятно, будут выведены подряд три сообщения. Чтобы увидеть результат работы, перейдите на вкладку Result: |
Last Updated on Wednesday, 13 June 2012 13:38 |