jQuery — метод hasClass(), или проверяем наличие класса у элемента
В этой совсем небольшой статье я расскажу, как с помощью jQuery проверить наличие класса у элемента. Любой HTML-элемент всегда может иметь более одного класса. Все классы, назначенные элементу, перечисляются через пробел в атрибуте class элемента, как показано ниже:
В этом примере для DIV-элемента установлено два класса — sizeable и draggable. Если нам необходимо проверить, задан ли определенный класс для какого-то элемента, то на jQuery это делается с помощью метода hasClass(). Так, если мы хотим узнать, есть ли у нашего DIV-а класс sizeable, мы делаем следующую проверку:
if ( $(«#myPanel»).hasClass(«sizeable») ) < alert("У элемента задан класс sizeable!"); >
После выполнения этого кода на экран будет выведено сообщение «У элемента задан класс sizeable!». Иногда начинающим разработчикам jQuery хочется использовать метод attr() библиотеки jQuery, чтобы сравнить значение атрибута class элемента с каким-то классом, что в корне неверно. Например, следующий код написан неправильно:
if ( $(«#myPanel»).attr(«class») == «sizeable» ) < // сюда мы никогда не попадем! alert("Это сообщение не отобразится, т.к. нельзя проверять наличие класса у элемента с помощью метода attr()!"); >
Никогда не проверяйте наличие класса у элемента с помощью метода attr()! Этот код не будет работать. Всегда используйте метод hasClass()
Поскольку по спецификации HTML у любого элемента может быть несколько классов, то вполне понятно, почему attr() здесь не срабатывает — этот метод используется для чтения или установки тех атрибутов элемента, которые имеют единственное значение. Такими могут быть, например, атрибуты id, title и т.д. Если необходимо проверить наличие нескольких классов у элемента, придется использовать метод hasClass() для проверки каждого класса. Например, если мы хотим узнать, заданы ли оба класса у элемента, то используем следующий код:
if ( $(«#myPanel»).hasClass(«sizeable») && $(«#myPanel»).hasClass(«draggable») ) < alert("У элемента заданы оба класса: sizeable и draggable!"); >
Если же хотим проверить наличие хотя бы одного из двух классов, то проверяем так:
if ( $(«#myPanel»).hasClass(«sizeable») || $(«#myPanel»).hasClass(«draggable») ) < alert("У элемента задан какой-то из классов: sizeable или draggable!"); >
Метод hasClass
Метод hasClass проверяет наличие CSS класса в элементе. Возвращает true , если CSS класс найден, и false — если не найден.
Синтаксис
$(селектор).hasClass(имя CSS класса);
Пример
Давайте проверим наличие в абзаце класса www :
text
alert( $(‘#test’).hasClass(‘www’) );
Смотрите также
- методы addClass ,
removeClass ,
toggleClass - JavaScript свойство classList ,
с помощью которого можно проверить наличие CSS класса на чистом JavaScript
Проверяем наличие класса у элемента на jQuery/JavaScript
В этой статье я хотел бы показать вам несколько способов, способных организовать проверку на наличие класса в неком элементе. Самих по себе классов, как вы знаете, у элемента может быть несколько, и все они указываются через пробел.
Наша же задача – проверить, присутствует ли определенный класс (или несколько классов) у элемента или нет, и дальше выполнить нужное нам действие.
Все описанные способы мы будем тестировать на конструкции:
А теперь о каждом подробнее.
Проверяем наличие класса у элемента на jQuery
В jQuery проверка наличия класса осуществляется посредством метода hasClass.
Для отрицания (то есть для проверки отсутствия класса) вы добавляете знак восклицания:
В таком случае действие будет выполнено, если указанный класс отсутствует.
Проверяем наличие класса у элемента на JavaScript
В JavaScript код будет чуть больше, но по конструкции аналогичен варианту с jQuery:
Здесь мы делаем проверку на наличие, а здесь:
соответственно, на отсутствие.
Мелочи, но весьма нужные инструменты в арсенале разработчика.
Проверить наличие класса и вывести значение у ряда элементов
Есть список элементов с id, всего 6 штук: el_1, el_2, el_3, el_4 el_5, el_6
При клике по элементу меняем класс с дефолтного на .ex_class, далее нужно проверить у всех элементов наличие класса .ex_class и затем в div c id «result» вывести порядковые значения через запятую элементов, которые имеют этот класс.
Сам класс определяю через .hasClass и в принципе понятно как провести пошаговую проверку каждого элемента, хотелось бы понять как можно сделать это массово через:
1 2 3 4 5 6 7
$('#el_1, #el_2, #el_3, #el_4 #el_5, #el_6').click (function() { $(this).toggleClass("ex_class"); if $(this).hasClass("ex_class") { } });
Сейчас при клике класс меняется и возвращается на дефолтный при втором клике на этот же элемент, нужно чтобы также и менялись значения в div result