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

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

  • автор:

Метод hasClass

Метод hasClass проверяет наличие CSS класса в элементе. Возвращает true , если CSS класс найден, и false — если не найден.

Синтаксис

$(селектор).hasClass(имя CSS класса);

Пример

Давайте проверим наличие в абзаце класса www :

text

alert( $(‘#test’).hasClass(‘www’) );

Смотрите также

  • методы addClass ,
    removeClass ,
    toggleClass
  • JavaScript свойство classList ,
    с помощью которого можно проверить наличие CSS класса на чистом JavaScript

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?

Мне нужно, что бы когда у div(а) не было класса js-hidden , происходило что-то, как сделать так что бы код отслеживал изменение постоянно?

  • Вопрос задан более трёх лет назад
  • 1457 просмотров

Комментировать

Решения вопроса 2

pavelkarinin

Pavel Karinin @pavelkarinin

Full Stack Web Developer

Способа есть только два: использовать setInterval() и постоянно проверять наличие или отсутствие класса js-hidden, но это «мягко говоря» не очень красиво и совсем не элегантное решение. И второй вариант — смотреть «кто меняет» (т.е. кем вызвано) изменение клсса и выполнять необходимое действие в этот момент.

Ответ написан более трёх лет назад

Комментировать

Нравится 2 Комментировать

Изучаю JS, CSS, HTML, PHP

Пропиши ID этому div например target

var theClass = $('#target').attr('class'); if(theClass == " js-hidden")< alert("У этого дива нужный нам класс"); >else

Ответ написан более трёх лет назад

Комментировать

Нравится 2 Комментировать

Ответы на вопрос 1

albert_rar

Альберт Рашитов @albert_rar

Проверяем наличие класса у элемента на jQuery/JavaScript

В этой статье я хотел бы показать вам несколько способов, способных организовать проверку на наличие класса в неком элементе. Самих по себе классов, как вы знаете, у элемента может быть несколько, и все они указываются через пробел.

Наша же задача – проверить, присутствует ли определенный класс (или несколько классов) у элемента или нет, и дальше выполнить нужное нам действие.

Все описанные способы мы будем тестировать на конструкции:

А теперь о каждом подробнее.

Проверяем наличие класса у элемента на jQuery

В jQuery проверка наличия класса осуществляется посредством метода hasClass.

   

Для отрицания (то есть для проверки отсутствия класса) вы добавляете знак восклицания:

   

В таком случае действие будет выполнено, если указанный класс отсутствует.

Проверяем наличие класса у элемента на JavaScript

В JavaScript код будет чуть больше, но по конструкции аналогичен варианту с jQuery:

   

Здесь мы делаем проверку на наличие, а здесь:

   

соответственно, на отсутствие.

Мелочи, но весьма нужные инструменты в арсенале разработчика.

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

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