Добавление класса элементам на странице
.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
“.