Информер курса валют ЦБ РФ   •   Магазин расширений
343 просм
0 комм
Поделиться:
Лучший платный хостинг!

Месяц в подарок. Помощь с переездом. Быстрая тех. поддержка. Цена от 115р в месяц. Скидки, спеши!

vk.cc/88lMkj

Проверяем наличие класса у элемента на 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>

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

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

0
комментариев
Гостям запрещено учавствовать в обсуждениях сайта. Авторизуйтесь, чтобы иметь возможность оставить свое мнение о материале или задать вопрос.