Проверить, существует ли элемент с данным классом в JavaScript/jQuery
В этом посте мы обсудим, как проверить, существует ли элемент с заданным классом в JavaScript и jQuery.
1. Использование jQuery
jQuery .hasClass() метод возвращает true, если указанный класс назначен элементу. Например, следующее вернет true, если div содержит container как класс.
JS
$ ( document ) . ready ( function ( ) < if ( $ ( 'div' ) . hasClass ( 'container' ) ) < alert ( 'Class exists' ) ; alert ( 'Class does not exist' ) ;
HTML
Другим решением является использование селектор класса, который выбирает все элементы с заданным классом. Следующая программа находит элемент с классом container , который возвращает ложное значение по первому индексу, если класс не найден.
JS
$ ( document ) . ready ( function ( ) < if ( $ ( 'div.container' ) [ 0 ] ) < alert ( 'Class exists' ) ; alert ( 'Class does not exist' ) ;
HTML
Кроме того, вы можете проверить длину объекта jQuery, возвращаемого селектором класса, для лучшей читабельности.
JS
$ ( document ) . ready ( function ( ) < if ( $ ( 'div.container' ) . length ) < alert ( 'Class exists' ) ; alert ( 'Class does not exist' ) ;
HTML
2. Использование JavaScript
С помощью JavaScript вы можете использовать встроенный в JavaScript getElementsByClassName() функция. Однако это определяет, существует ли класс или нет, но не идентифицирует элемент, связанный с классом.
JS
if ( document . getElementsByClassName ( ‘container’ ) . length ) < alert ( 'Class exists' ) ; alert ( 'Class does not exist' ) ;
HTML
Чтобы настроить таргетинг на элемент с его идентификатором, используйте querySelector() функция.
JS
if ( document . querySelector ( ‘div.container’ ) !== null ) < alert ( 'Class exists' ) ; alert ( 'Class does not exist' ) ;
HTML
Другим приемлемым способом является использование classList собственность с getElementById() функция.
JS
var div = document . getElementById ( ‘outerdiv’ ) ;
if ( div . classList . contains ( ‘container’ ) ) <
alert ( 'Class exists' ) ;
alert ( 'Class does not exist' ) ;
HTML
Это все, что касается определения того, существует ли элемент с данным классом в JavaScript и jQuery.
Оценить этот пост
Средний рейтинг 4.83 /5. Подсчет голосов: 23
Голосов пока нет! Будьте первым, кто оценит этот пост.
Сожалеем, что этот пост не оказался для вас полезным!
Расскажите, как мы можем улучшить этот пост?
Спасибо за чтение.
Пожалуйста, используйте наш онлайн-компилятор размещать код в комментариях, используя C, C++, Java, Python, JavaScript, C#, PHP и многие другие популярные языки программирования.
Как мы? Порекомендуйте нас своим друзьям и помогите нам расти. Удачного кодирования 🙂
Подписывайся
1 Комментарий
Большинство голосов
Новейшие Самый старый
Встроенные отзывы
Просмотреть все комментарии
Просмотр комментариев
Загрузить больше комментариев
Просматривать
Подпишитесь на новые публикации
- Все проблемы
- Практика DSA
- 100 самых популярных задач
- 50 лучших классических задач
- Лучшие алгоритмы
- Компилятор С/С++
- Компилятор Java
- Компилятор Python
- Компилятор JavaScript
- компилятор PHP
- Компилятор C#
- Свяжитесь с нами
- Политика конфиденциальности
- условия обслуживания
- Подпишитесь на новые публикации
Techie Delight © 2023 Все права защищены.
Этот веб-сайт использует файлы cookie. Используя этот сайт, вы соглашаетесь с использованием файлов cookie, нашей политикой, условиями авторского права и другими условиями. Читайте наши Политика конфиденциальности. Понятно
Проверить наличие CSS класса в javascript
Как проверить наличие или отсутствие класса у элемента на чистом javascript? Необходимо добавить класс элементу по клику, но при этом проверить наличие у него этого класса перед добавлением, чтобы класс не дублировался. вот код:
var cells = document.getElementsByTagName('td'); for(var i=0; i function selectDate()
ссылка на полный код jsfiddle
Отслеживать
2,139 1 1 золотой знак 13 13 серебряных знаков 21 21 бронзовый знак
задан 4 дек 2015 в 11:51
1,549 8 8 золотых знаков 24 24 серебряных знака 51 51 бронзовый знак
4 ответа 4
Сортировка: Сброс на вариант по умолчанию
Вам поможет метод classList.contains вместо className
contains ( String )
Проверяет, есть ли данный класс у элемента (вернет true или false)
использовать можно так:
if(this.classList.contains('active')) где this должен быть html-элементом.
Отслеживать
ответ дан 4 дек 2015 в 11:57
80.9k 9 9 золотых знаков 78 78 серебряных знаков 134 134 бронзовых знака
Отличная штука. Не знал. Спасибо
4 дек 2015 в 11:59
@tutankhamun, они постепенно расширяют интерфейсы дом элементов 🙂
4 дек 2015 в 12:00
Так скоро jQuery не понадобится в 95% случаев, в который он сейчас почти необходим 🙂
4 дек 2015 в 12:05
@tutankhamun, а в каких например он сейчас почти необходим?
4 дек 2015 в 12:06
Я вот уже и не уверен, что знаю ответ на ваш вопрос 🙂 Внедрение document.querySelector() и document.querySelectorAll() очень сильно подорвало фундамент jQuery. Получается что в сухом остатке только поддержка старых браузеров
4 дек 2015 в 12:12
Можно воспользоваться следующей функцией:
function hasClass(element, className)
Плюс такого решения — работает даже на древних браузерах
Отслеживать
ответ дан 4 дек 2015 в 11:58
tutankhamun tutankhamun
11.3k 5 5 золотых знаков 25 25 серебряных знаков 40 40 бронзовых знаков
пока сложновато для меня. это чистый js?
4 дек 2015 в 12:01
@MarinaVoronova, чище некуда 🙂
4 дек 2015 в 12:01
сделала так — по клику добавляется класс и удаляется при повторном клике. вот код:
var cells = document.getElementsByTagName('td'); for(var i=0; i function selectDate()< if(this.classList.contains('active'))< this.classList.remove('active'); >else < this.classList.add('active'); >> ссылка на полный код: jsfiddle
Отслеживать
2,139 1 1 золотой знак 13 13 серебряных знаков 21 21 бронзовый знак
ответ дан 11 дек 2015 в 3:58
1,549 8 8 золотых знаков 24 24 серебряных знака 51 51 бронзовый знак
Вместо того, чтобы городить такой if, раз уж Вы используете classList , можно воспользоваться готовой функцией: classList.toggle(‘active’) . И совет, ставить обработчики в цикле не хорошо, лучше повесить его на родителя, так шустрее будет работать.
11 дек 2015 в 7:37
спасибо, сработало)
11 дек 2015 в 8:58
Вместо того, что у Вас в selectDate()<> надо написать проcто this.classList.toggle(‘active’)
11 дек 2015 в 8:58
да, я уже применила jsfiddle.net/lilubanana/fwxuf5ea/29
11 дек 2015 в 8:59
и еще, для понимания, могу я использовать функцию toggle если не подключена jquery? у меня все работает, но если браузер будет старый?
11 дек 2015 в 10:09
Если нужно проверить именно наличия класса то используйте такую конструкцию
!!~elem.getAttribute("class").indexOf("my__class") classList.toggle('active') добавляет класс при его отсутствие и удаляет при его наличии.
parent.contains(child) Возвращает true, если parent содержит child или parent == child То есть если у нас несколько child то придется проверять в цикле. Да и опять же вложенность
Отслеживать
ответ дан 27 янв 2020 в 8:24
Дмитрий Бабанин Дмитрий Бабанин
33 6 6 бронзовых знаков
!!~elem.getAttribute(«class»).indexOf(«my__class») — плохой вариант, например зацепит my__class1 , ну и читаемость ужасная лучше обычный if, чем !!~
27 янв 2020 в 16:04
1. js насколько я знаю все задачи делаются для определенной цели. Если конечно у человека будут в одном элементе содержать классы active + no-active + active-elem. То да. Нужно делать через регулярки. 2. Вы вообще знаете для чего конструкция предназначена !!~ ? При чем тут «лучше обычный if, чем !!~» .
28 янв 2020 в 8:25
При том, что намного проще читается обычное сравнение с -1 чем куча спец символов идущих друг за другом 🙂 собственно и такой конструкции !!~ в языке нет, это ж просто куча унарных операторов и для большей экспрессии можно и 10 восклицательных знаков поставить 🙂
29 янв 2020 в 7:49
по вашему конструкция if( -1 == elem.getAttribute(«class»).indexOf(«my__class»)) читается лучше чем if(~elem.getAttribute(«class»).indexOf(«my__class»)) ?
Как проверить наличие класса у одного из блоков div?
Как проверить наличие класса .on хотя-бы у одного из блоков div?
- Вопрос задан более трёх лет назад
- 10393 просмотра
Комментировать
Решения вопроса 3
Ярослав Иванов @space2pacman
Просто царь.
document.querySelector(".my").classList.contains("on") // true/falseОтвет написан более трёх лет назад
Комментировать
Нравится 3 Комментировать
Старый прогер
document.querySelector(‘.my.on’) !== null
Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
if($('.my').hasClass('on'))
Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
Ответы на вопрос 0
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- JavaScript
Как удалить ненужные символы в строке?
- 2 подписчика
- 3 часа назад
- 53 просмотра
- JavaScript
- +1 ещё
Как настроить nuxt, чтобы работали запросы на бэк во время серверного рендера?
- 1 подписчик
- 4 часа назад
- 42 просмотра
- JavaScript
Как вставить содержимое в iframe без src?
- 1 подписчик
- 9 часов назад
- 58 просмотров
- JavaScript
Как обработать массив переменной длины?
- 1 подписчик
- 10 часов назад
- 65 просмотров
- JavaScript
- +2 ещё
Из-за слайдера не открывается всплывающая форма?
- 1 подписчик
- 10 часов назад
- 30 просмотров
- JavaScript
Как вставить видео с ютуба с локальным превью?
- 1 подписчик
- 18 часов назад
- 49 просмотров
- JavaScript
Почему возвращается rej из первого promise в цепочке?
- 1 подписчик
- 21 час назад
- 47 просмотров
- JavaScript
Почему не выполняется код с открытием попапа внутри then?
- 1 подписчик
- 23 часа назад
- 69 просмотров
- JavaScript
- +2 ещё
Как можно избежать сдвига контента при открытии модального окна?
- 2 подписчика
- вчера
- 217 просмотров
- JavaScript
Как правильно сделать асинхронный генератор с неявным кол-вом выполнения?
- 1 подписчик
- вчера
- 54 просмотра
от 200 000 до 600 000 ₽
от 20 000 до 30 000 ₽
от 70 000 до 100 000 ₽
23 нояб. 2023, в 19:43
4000 руб./за проект
23 нояб. 2023, в 19:24
10000 руб./за проект
23 нояб. 2023, в 18:53
4000 руб./за проект
Минуточку внимания
Присоединяйтесь к сообществу, чтобы узнавать новое и делиться знаниями
- Как сделать программу для удаленного доступа?
- 2 подписчика
- 1 ответ
- 2 подписчика
- 0 ответов
- 2 подписчика
- 1 ответ
- 2 подписчика
- 1 ответ
- 2 подписчика
- 4 ответа
- 3 подписчика
- 2 ответа
- 3 подписчика
- 2 ответа
- 2 подписчика
- 1 ответ
- 2 подписчика
- 1 ответ
- 2 подписчика
- 1 ответ
Проверяем наличие класса у элемента на jQuery/JavaScript
В этой статье я хотел бы показать вам несколько способов, способных организовать проверку на наличие класса в неком элементе. Самих по себе классов, как вы знаете, у элемента может быть несколько, и все они указываются через пробел.
Наша же задача – проверить, присутствует ли определенный класс (или несколько классов) у элемента или нет, и дальше выполнить нужное нам действие.
Все описанные способы мы будем тестировать на конструкции:
А теперь о каждом подробнее.
Проверяем наличие класса у элемента на jQuery
В jQuery проверка наличия класса осуществляется посредством метода hasClass.
Для отрицания (то есть для проверки отсутствия класса) вы добавляете знак восклицания:
В таком случае действие будет выполнено, если указанный класс отсутствует.
Проверяем наличие класса у элемента на JavaScript
В JavaScript код будет чуть больше, но по конструкции аналогичен варианту с jQuery:
Здесь мы делаем проверку на наличие, а здесь:
соответственно, на отсутствие.
Мелочи, но весьма нужные инструменты в арсенале разработчика.