Артём Мáлков

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

24 ноя4 коммАртём Мáлков

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

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

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

<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>

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

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

Рекомендуем к просмотру
Как добавить несколько обработчиков событий addEventListener() к одному элементу в JavaScript?
Статьи и советы
Как проверить наличие слова, фразы или текста в строке на PHP/JavaScript
Статьи и советы
Как убрать подчеркивание у ссылок в HTML на CSS/jQuery
Статьи и советы
4
комментария
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 4
    3
      •  Проверенный
    10 июл в 20:33

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

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

    • 1
    3
      •  Проверенный
    10 июл в 16:27

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

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

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

    • 3
    1080
      •  Команда Pandoge
    10 июл в 16:04

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

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

    <script>

    $(document).ready(function() {

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

    });

    </script>

    • 2
    3
      •  Проверенный
    10 июл в 13:06

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

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

    <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", но, не получилось...

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

Подняться наверх
Регистрация на сайте
Pandoge - уникальный проект, который собрал на своих страницах большой опыт многих людей в сфере сайтостроения.Присоединяйся и ты к сообществу, получай неограниченные знания и начинай творить свою мечту!Нажимая кнопку «Регистрация» вы даете согласие на обработку своих персональных данных.
Имя и фамилия
E-mail
Логин
Пароль
Регистрация
Pandoge