Содержание
В этой совсем небольшой статье я расскажу, как с помощью jQuery проверить наличие класса у элемента. Любой HTML-элемент всегда может иметь более одного класса. Все классы, назначенные элементу, перечисляются через пробел в атрибуте class элемента.
В этой совсем небольшой статье я расскажу, как с помощью jQuery проверить наличие класса у элемента. Любой HTML-элемент всегда может иметь более одного класса. Все классы, назначенные элементу, перечисляются через пробел в атрибуте class элемента, как показано ниже:
В этом примере для DIV-элемента установлено два класса — sizeable и draggable. Если нам необходимо проверить, задан ли определенный класс для какого-то элемента, то на jQuery это делается с помощью метода hasClass(). Так, если мы хотим узнать, есть ли у нашего DIV-а класс sizeable, мы делаем следующую проверку:
После выполнения этого кода на экран будет выведено сообщение "У элемента задан класс sizeable!". Иногда начинающим разработчикам jQuery хочется использовать метод attr() библиотеки jQuery, чтобы сравнить значение атрибута class элемента с каким-то классом, что в корне неверно. Например, следующий код написан неправильно:
Никогда не проверяйте наличие класса у элемента с помощью метода attr()! Этот код не будет работать. Всегда используйте метод hasClass()
Поскольку по спецификации HTML у любого элемента может быть несколько классов, то вполне понятно, почему attr() здесь не срабатывает — этот метод используется для чтения или установки тех атрибутов элемента, которые имеют единственное значение. Такими могут быть, например, атрибуты id, title и т.д. Если необходимо проверить наличие нескольких классов у элемента, придется использовать метод hasClass() для проверки каждого класса. Например, если мы хотим узнать, заданы ли оба класса у элемента, то используем следующий код:
Если же хотим проверить наличие хотя бы одного из двух классов, то проверяем так:
В рамках данной статье мы поговорим о простых, но важных мелочах в арсенале каждого разработчика — в частности, организуем проверку на наличие того или иного класса в одном из элементов, которых в нем может быть сразу несколько.
Все классы указываются через пробел, а нам предстоит узнать, присутствует ли определенный класс или некое их количество у нужного элемента, и исходя из полученных данных провести какие-либо дальнейшие действия.
Способов будет два, и каждый из них тестируется на вот такой вот конструкции:
Проверяем наличие класса у элемента на jQuery
jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML, и, чтобы проверить наличие класса в её элементах необходимо использовать метод hasClass.
Вот как это делается:
Проверка отсутствия класса выполняется с добавлением знака восклицания:
Если действие выполнено успешно, это значит, что указанный класс в элементе отсутствует.
Проверяем наличие класса у элемента на JavaScript
Если проверить нужно в JavaScript, код немного больше, но принцип его работы схож с вышеупомянутой jQuery. Вот так выглядит проверка на наличие класса:
Соответственно, по аналогии с вариантом выше, проверка на отсутствие:
Как мы уже говорили, это мелочи, но знать такую информацию должен каждый веб-разработчик.
рекомендованная Статья
Многие популярные CMS, такие, как WordPress и Data Life Engine, предлагают в качестве базы данных использовать InnoDB, мотивируя это скоростью…
В этой статье я хотел бы показать вам несколько способов, способных организовать проверку на наличие класса в неком элементе. Самих по себе классов, как вы знаете, у элемента может быть несколько, и все они указываются через пробел.
Наша же задача – проверить, присутствует ли определенный класс (или несколько классов) у элемента или нет, и дальше выполнить нужное нам действие.
Все описанные способы мы будем тестировать на конструкции:
А теперь о каждом подробнее.
Проверяем наличие класса у элемента на jQuery
В jQuery проверка наличия класса осуществляется посредством метода hasClass.
Для отрицания (то есть для проверки отсутствия класса) вы добавляете знак восклицания:
В таком случае действие будет выполнено, если указанный класс отсутствует.
Проверяем наличие класса у элемента на JavaScript
В JavaScript код будет чуть больше, но по конструкции аналогичен варианту с jQuery:
Здесь мы делаем проверку на наличие, а здесь:
соответственно, на отсутствие.
Мелочи, но весьма нужные инструменты в арсенале разработчика.
«>