Проверяем наличие класса у элемента на jQuery/JavaScript
В этой статье я хотел бы показать вам несколько способов, способных организовать проверку на наличие класса в неком элементе. Самих по себе классов, как вы знаете, у элемента может быть несколько, и все они указываются через пробел.
Наша же задача – проверить, присутствует ли определенный класс (или несколько классов) у элемента или нет, и дальше выполнить нужное нам действие.
Все описанные способы мы будем тестировать на конструкции:
<div class="pandoge com"></div>А теперь о каждом подробнее.
Проверяем наличие класса у элемента на jQuery
В jQuery проверка наличия класса осуществляется посредством метода hasClass.
Пример:
<div class="pandoge com"></div>
<script>
if($(".pandoge").hasClass("com")) {
alert("У элемента есть класс com!");
// Здесь может быть любой другой ваш код
}
</script>Для отрицания (то есть для проверки отсутствия класса) вы добавляете знак восклицания:
<div class="pandoge com"></div>
<script>
if(!$(".pandoge").hasClass("www")) {
alert("У элемента нет класса www!");
// Здесь может быть любой другой ваш код
}
</script>В таком случае действие будет выполнено, если указанный класс отсутствует.
Проверяем наличие класса у элемента на JavaScript
В JavaScript код будет чуть больше, но по конструкции аналогичен варианту с jQuery:
<div class="pandoge com"></div>
<script>
if(document.querySelector(".pandoge").classList.contains("com")) {
alert("У элемента есть класс com!");
// Здесь может быть любой другой ваш код
}
</script>Здесь мы делаем проверку на наличие, а здесь:
<div class="pandoge com"></div>
<script>
if(!document.querySelector(".pandoge").classList.contains("www")) {
alert("У элемента нет класса www!");
// Здесь может быть любой другой ваш код
}
</script>соответственно, на отсутствие.
Мелочи, но весьма нужные инструменты в арсенале разработчика.
