jQuery метод .addClass()

Определение и применение

jQuery метод .addClass() добавляет один или несколько имен классов для выбранных элементов. Метод может быть также использован в документах XML и формате SVG.

Обращаю Ваше внимание, что этот метод не заменяет, а добавляет класс (присоединяет к указанным элементам). Чтобы добавить к элементу несколько классов, то необходимо перечислить их через пробел.

Удаление класса, либо классов элемента Вы можете произвести с использованием jQuery метода .removeClass().

jQuery синтаксис:

Синтаксис 1.0:
$(selector).addClass(className)

Синтаксис 1.4:
$(selector).addClass(className,function(index, currentClassName ))

где:
index - Integer
currentClassName - String

Добавлен в версии jQuery

1.0 (синтаксис обновлен в версии 1.4)

Значения параметров

Параметр	Описание
className	Задает одно или несколько имен классов, которые будут добавлены к элементу, или элементам.
function(index, currentClassName)	Задает функцию, которая возвращает одно или несколько имен классов, которые будут добавлены. index - возвращает индекс позиции элемента в наборе (среди выбранных элементов). currentClassName - возвращает текущее имя класса выбранного элемента.

Параметр

Описание

className

Задает одно или несколько имен классов, которые будут добавлены к элементу, или элементам.

function(index, currentClassName)

Задает функцию, которая возвращает одно или несколько имен классов, которые будут добавлены.

index - возвращает индекс позиции элемента в наборе (среди выбранных элементов).
currentClassName - возвращает текущее имя класса выбранного элемента.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Добавление класса к элементу (jQuery метод .addClass())</title>
		<style>.redColor {
color: red; /* цвет текста красный */	
}
.transition {
transition: .5s; /* эффект перехода занимает пол секунды */
}
</style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $("p").click(function(){ // задаем функцию при нажатиии на элемент <p>
	   $(this).addClass('transition redColor'); // добавляем элементу <p> по которому произведен клик два класса
	  });
	});
		</script>
	</head>
	<body>
		<p>Обычный абзац</p>
		<p>Обычный абзац</p>
		<p>Обычный абзац</p>
		<p>Обычный абзац</p>
	</body>
</html>

В этом примере с использованием jQuery метода .addClass() мы добавляем два класса к элементу <p> (абзац) по которому произведён клик.

Результат нашего примера:

Пример добавления класса к элементу (jQuery метод .addClass())

Рассмотрим пример в котором в качестве параметра метода .addClass() передадим функцию:

<!DOCTYPE html>
<html>
	<head>
		<title>Получение индекса и имени класса элемента в наборе.</title>
		<style>.redColor {
color: red; /* цвет текста красный */	
}
.greenColor {
color: green; /* цвет текста зеленый */	
}
div {
color: blue; /* цвет текста синий */	
}
</style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$(document).ready(function(){	  
	  $("p").addClass(function(index, currentClass){ // задаем функцию в качестве параметра метода .addClass()
	    var addedClass; // создаем переменную	
	    if (currentClass === "redColor") { // если класс элемента идентичен redColor
             addedClass = "greenColor"; // присваиваем значение переменной (соответствует значению класса)	
             $( "div" ).append("<p>нашёлся с индексом - " + index + "</p>"); // добавляем в элемент <div> информацию о индексе элементов, которые были выбраны
            }
            return addedClass; // возвращаем значение (значение переменной устанавливается в качестве класса элемента)
	  });
	});
		</script>
	</head>
	<body>
		<p>Обычный абзац</p>
		<p class = "redColor">Обычный абзац</p>
		<p class = "redColor">Обычный абзац</p>
		<p>Обычный абзац</p>
	</body>
</html>

В этом примере с использованием jQuery метода .addClass() мы нашли все элементы <p> (абзац), которые имеют класс "redColor", добавили для этих элементов класс "greenColor" и с использованием метода .append() добавили в элемент <div> информацию о индексе элементов, которые были выбраны.

Результат нашего примера:

Пример получение индекса и имени класса элемента в наборе с использованием метода .addClass().

jQuery DOM методы