Профессиональная поддержка сайтов: разработка, дизайн, тексты, SEO и прочее от 500 Р   •   Реклама
5 830 просм
4 комм
Поделиться:

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

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

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

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

Ура, заработало )) Оказывается, не было подключения библиотеки jquery, хотя весь остальной функционал работает, странно.

Артем спасибо большое, я еще бы долго возился ))

  • 1

Артем, благодарю за ответ!

К сожалению, ничего не получилось. Вообще ничего не происходит (

Других способов нет?

  • 0

Денис Максимов, здравствуйте.

Попробуйте так:

<script>

$(document).ready(function() {

$("a.wp-block-file__button").removeAttr("rel");

});

</script>

  • 0

Артем, добрый день! Подскажи пожалуйста, как можно убрать нужный элемент из ссылки!

Есть две ссылки:

<a href="" rel="simplebox_group" title="Черновик">logo</a>

<a href="" rel="simplebox_group" title="Черновик" class="wp-block-file__button" download="">Скачать</a>

Из второй ссылки каким то образом нужно удалить - rel="simplebox_group", а остальное оставить как есть.

Функция - rel="simplebox_group", отвечает за анимацию изображения при клике на него, поэтому у первой ссылки оно должно работать.

А вторая ссылка отвечает за скачивание этого изображения, но срабатывает - rel="simplebox_group" и изображение не скачивается.

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

Я пытался решить поиском класса - wp-block-file__button у ссылок, и если класс найден, то удалить у этой ссылки - rel="simplebox_group", но, не получилось...

Буду очень благодарен!!!

  • 0
Подняться наверх
«Pandoge» - помощник веб-мастера