.addClass( className )Возвращает: jQuery
Описание: Добавляет указанные класс(ы) к каждому элементу в наборе сопоставленных элементов.
-
версия добавлена: 1.0.addClass( className )
- classNameТип: СтрокаОдна или несколько классов, разделённых пробелами, которые нужно добавить к атрибуту class каждого сопоставленного элемента.
-
-
версия добавлена: 3.3.addClass( classNames )
- classNamesТип: МассивМассив классов, которые нужно добавить к атрибуту class каждого сопоставленного элемента.
-
-
версия добавлена: 1.4.addClass( function )
- functionФункция, возвращающая один или несколько классов, разделённых пробелами, которые нужно добавить к существующим классам. Получает позицию элемента в наборе и существующие имена классов в качестве аргументов. Внутри функции,
thisссылается на текущий элемент в наборе.
-
-
версия добавлена: 3.3.addClass( function )
- functionФункция, возвращающая один или несколько классов, разделённых пробелами, или массив классов, которые нужно добавить к существующим классам. Получает позицию элемента в наборе и существующие имена классов в качестве аргументов. Внутри функции,
thisссылается на текущий элемент в наборе.
-
Важно отметить, что этот метод не заменяет класс. Он просто добавляет класс, добавляя его к уже имеющимся у элементов.
Перед версией jQuery 1.12/2.2 метод .addClass() манипулировал className свойством выбранных элементов, а не class атрибутом. После изменения свойства, браузер обновлял атрибут соответственно. Последствием этого поведения было то, что этот метод работал только для документов с семантикой HTML DOM (например, не для чистых XML-документов).
Начиная с jQuery 1.12/2.2, это поведение изменено для улучшения поддержки XML-документов, включая SVG. Начиная с этой версии, используется class атрибут вместо этого. Поэтому, .addClass() может использоваться в XML или SVG документах.
Можно добавить несколько классов одновременно, разделяя их пробелом, к набору сопоставленных элементов, например так:
$( "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;
}); В данном примере, для неупорядоченного списка с двумя <li> элементами, к первому <li> добавляется класс "item-0", а ко второму - "item-1".
Примеры:
Добавить класс "selected" к сопоставленным элементам.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: blue;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>
$( "p" ).last().addClass( "selected" );
</script>
</body>
</html> Демо:
Добавить классы "selected" и "highlight" к сопоставленным элементам.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: red;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>
$( "p" ).last().addClass( "selected highlight" );
</script>
</body>
</html> Демо:
Добавить классы "selected" и "highlight" к сопоставленным элементам (синтаксис 3.3+).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: red;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>
$( "p" ).last().addClass( [ "selected", "highlight" ] );
</script>
</body>
</html> Демо:
Передать функцию в .addClass() для добавления класса "green" к div, который уже имеет класс "red".
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
div {
background: white;
}
.red {
background: red;
}
.red.green {
background: green;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<div>This div should be white</div>
<div class="red">This div will be green because it now has the "green" and "red" classes.
It would be red if the addClass function failed.</div>
<div>This div should be white</div>
<p>There are zero green divs</p>
<script>
$( "div" ).addClass(function( index, currentClass ) {
var addedClass;
if ( currentClass === "red" ) {
addedClass = "green";
$( "p" ).text( "There is one green div" );
}
return addedClass;
});
</script>
</body>
</html> 
