Vi
27 Авг в 12:09
106 просмотров
< 1 минуты
Проверяем наличие класса у элемента на jQuery
Содержание
Нет времени читать статью?

Но вам требуется продвижение сайта или создание сайта-лидера, идеального для SEO? Тогда вы можете оставить заявку на продвижение или заявку на создание сайта. Если вы собираетесь продвигать сайт самостоятельно — продолжайте чтение!

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

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

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

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

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

0

Добавить комментарий

Ваш адрес email не будет опубликован.

четыре × один =