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

Приветствую вас на моем блоге. Сегодня я хотел бы продолжить тему работы с библиотекой, самые основные принципы работы с ней. Например, как в jquery проверить наличие класса? Это очень полезная возможность и сегодня мы с вами научимся осуществлять эту операцию.

Проверка на наличие одного класса

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

<div class = "block b1"></div>

Хорошо, как нам проверять у элемента наличие класса b1, и в зависимости от результата, предпринимать то или иное действие. Я предлагаю такой код:

if ( $(".block").hasClass("b1") ) {
alert("У элемента есть указанный класс!");
}
        else{
alert("Класс отсутствует");
}
    });

Код достаточно простой, тут главное не запутаться в скобках. Итак, мы даем такое условие: если у элемента .block есть класс b1, то будет выведено сообщение о том, что он есть, а если нет, будет выведено, что он отсутствует. Примитивно, но для того, чтобы понять суть, вполне сойдет. В данный момент класс присутствует, поэтому мы увидим соответствующее сообщение. Если удалить класс, текст будет уже другим.

Другие примеры + проверка на наличие множества классов

Изменим у элемента класс block на идентификатор, а в качестве класса добавить еще один — bd. Теперь смотрите код:

if ( $("#block").hasClass("b1") && $("#block").hasClass("bd") ) {
$("#block").css('backgroundColor', 'red');
}
        else{
$("#block").css('backgroundColor', 'yellow');
}
    });

Добавив в конце записи два амперсанда вы можете записать еще одно условие. Теперь, чтобы условие считалось истинным, необходимо исполнение обоих правил — элемент должен иметь классы b1 и bd. Если это так, фоновый цвет становится красным, если нет — желтым. Остается только проверить. Попробуйте удалить хотя бы один из классов и вы сразу заметите, как блок перекрасился в желтый.

Проверка на наличие хотя бы одного из множества

if ( $("#block").hasClass("b1") || $("#block").hasClass("bd") || $("#block").hasClass("bg") )

— эта длинная строка кода проверяет элемент с id = block на наличие в нем трех классов. И если хотя бы один из них будет обнаружен, дальнейшие инструкции исполнены. Для этого достаточно вместо двух амперсандов записать две вертикальные черты.

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