Добавление класса элементам на странице

.addClass() — добавляет класс(ы) выбранным элементам страницы. Если из этих элементов некоторые уже принадлежат каким-то классам, то новый(ые) класс добавится к существующим, а не заменит их.

Функция имеет два варианта использования:

.addClass( className )
  • className — имя класса (или имена классов через пробел), которое требуется добавить к связанному элементу.
.addClass( function )
  • function (index, currentClassName) — добавляет классы, список которых возвращает заданная пользователем функция. Возвращаемое ей значение должно представлять из себя строку, с перечислением добавляемых классов через пробел. Функция вызывается отдельно для каждого из выбранных элементов.
    • index — позиция элемента в наборе;
    • currentClassName — текущий класс(ы) элемента.

Одновременно может быть добавлен один и более классов, разделённые через пробел:

$( "p" ).addClass( "myClass yourClass" );

Часто в связке с данным методом, используется .removeClass() для удаления одних классов и добавления других:

$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

Тут мы сначала удаляем классы myClass и noClass, а потом добавляем класс yourClass

Начиная с jQuery 1.4, метод .addClass() в качестве аргумента может принимать функцию (второй способ использования).

$( "ul li" ).addClass(function( index ) {
  return "item-" + index;
});

В данном примере, к первому элементу ненумерованного списка будет добавлен класс «item-0«, а ко второму «item-1«.

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *