Как проверить наличие класса jquery
Перейти к содержимому

Как проверить наличие класса jquery

  • автор:

Как проверить наличие класса

Встроенной функции или callback’a для addClass не существует. Можно правда переписать функция addClass() и добавить callback. Но проще и лучше поступить следующим образом:

// в нужный момент добавляем класс $('.one').addClass('two'); // используем кастомное событие, которое сигнализирует о том что класс поменяли $(document).trigger('cssClassChanged'); $(document).on('cssClassChanged', function()< //класс поменялся обрабатываем его т.е >); 

Отслеживать
ответ дан 7 окт 2013 в 16:58
Гена Царинный Гена Царинный
4,677 1 1 золотой знак 16 16 серебряных знаков 23 23 бронзовых знака

Тот кто поставил минус, пусть обоснует за что. В задаче класс присваивается динамически и простой проверкой hasClass тут не обойтись.

jQuery — метод hasClass(), или проверяем наличие класса у элемента

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

В этом примере для 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!"); >

Как проверить, что элемент содержит определенный класс в jQuery?

В этой статье мы увидим, как проверить, содержит ли элемент определенный класс, используя jQuery. Будет использоваться функция Jquery, называемая функцией hasClass() , которая вернет логический результат, если конкретный элемент содержит какой-либо определенный класс. Обратите внимание, что мы можем проверить наличие нескольких классов, доступных в одном теге.

Синтаксис:

$().hasClass();

Например, у нас есть тег div, в котором есть класс с именем parent.

Тогда следующий скрипт jQuery вернет true, а если мы передадим параметр else, то он просто вернет false.

$("div").hasClass("parent");

Пример 1. В этом рабочем примере у нас будут теги и , у нас будет имя класса в теге и две кнопки для отдельной проверки классов в следующих тегах HTML. . Поскольку мы включили класс субтитров в тег , он вернет true в качестве всплывающего окна с предупреждением и false для тега , что мы видим в выводе.

Выход:

Пример 2: В этом другом примере мы включаем еще два класса в тег и проверяем каждый отдельный класс, этот метод hasClass() будет работать для нескольких классов, поэтому он будет возвращать истинный результат в каждом случае, мы будет использовать несколько операторов if для проверки разных имен классов.

Выход:

Как проверить наличие класса в jquery

Функция .hasClass(), простой пример, выводит сообщение о наличии класса test1 у элемента при клике:

$('div').click(function()< if($(this).hasClass('test1'))< alert('У этого блока есть класс test1'); >else < alert('У этого блока нет класса test1'); >>);
.test1 < width:100px; height:100px; padding:10px; margin:10px; background: red; >.test2

Отслеживать
ответ дан 25 дек 2017 в 9:01
ExposedCat ExposedCat
358 1 1 золотой знак 4 4 серебряных знака 15 15 бронзовых знаков

  • javascript
  • jquery
  • условия
  • проверка
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.4.30.8412

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *