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

Проверяем наличие класса у элемента на jQuery
Создание сайтов

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

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

Способов будет два, и каждый из них тестируется на вот такой вот конструкции:

<div class=»seozp ru»></div>

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

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML, и, чтобы проверить наличие класса в её элементах необходимо использовать метод hasClass.

Вот как это делается:

<div class="seozp ru"></div>
<script>
if($(".seozp").hasClass("ru")) {
alert("У элемента есть класс ru!");
// Здесь может быть любой другой ваш код
}
</script>

Проверка отсутствия класса выполняется с добавлением знака восклицания:

<div class="seozp ru"></div>
<script>
if(!$(".seozp").hasClass("www")) {
alert("У элемента нет класса www!");
// Здесь может быть любой другой ваш код
}
</script>

Если действие выполнено успешно, это значит, что указанный класс в элементе отсутствует.

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

Если проверить нужно в JavaScript, код немного больше, но принцип его работы схож с вышеупомянутой jQuery. Вот так выглядит проверка на наличие класса:

<div class="seozp ru"></div>
<script>
if(document.querySelector(".seozp").classList.contains("ru")) {
alert("У элемента есть класс ru!");
// Здесь может быть любой другой ваш код
}
</script>

Соответственно, по аналогии с вариантом выше, проверка на отсутствие:

<div class="seozp ru"></div>
<script>
if(!document.querySelector(".seozp").classList.contains("www")) {
alert("У элемента нет класса www!");
// Здесь может быть любой другой ваш код
}
</script>

Как мы уже говорили, это мелочи, но знать такую информацию должен каждый веб-разработчик.

Оцените статью
SEO
Добавить комментарий

Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности