.addClass( имяКласса )
Возвращает: jQuery
Описание: Добавляет указанный(е) класс(ы) к каждому совпавшему элементу.
.addClass( имяКласса )
Добавлена в версию: 1.0
имяКласса
Один или несколько имен классов для добавления к атрибуту класс каждого совпавшего элемента.
.addClass( function(индекс, класс) )
Добавлена в версию: 1.4
function(индекс, класс)
Функция, возвращающая один или несколько, разделенных пробелами, имен класса для добавления. Получает индекс положения элемента в наборе, и старое значение класса в качестве аргументов.
Важно отметить, что этот метод не заменяет класс. Он просто добавляет класс к любому классу, который уже отнесен к элементу.
Более одного класса может быть добавленно одновременно, разделенных пробелами, в набор соответствующих элементов, как например:
$('p').addClass('myClass yourClass');
Этот метод обычно используется с .removeClass() для переключения классов элемента от одного к другому, как например:
$('p').removeClass('myClass noClass').addClass('yourClass');
Здесь, класс myClass и noClass удаленны из всех параграфов, в то время как yourClass добавлен.
Начиная с jQuery 1.4, метод .addClass() позволяет нам установить имя класса, передав его в функцию.
В неотсортированный список с пятью элементами <li>,
этот пример добавит класс "item-4" к последнему <li>.
Примеры
Пример 1
Добавляет класс ’selected’ к совпавшим элементам.Пример 1 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p:last").addClass("selected"); }); </script> <style> p { margin: 8px; font-size:16px; } .selected { color:blue; } .highlight { background:yellow; } </style> </head> <body> <p>Hello</p> <p>and</p> <p>Goodbye</p> </body> </html>
Пример 2
Добавляет классы ’selected’ и ‘highlight’ к совпавшим элементам.Пример 2 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p:last").addClass("selected highlight"); }); </script> <style> p { margin: 8px; font-size:16px; } .selected { color:red; } .highlight { background:yellow; } </style> </head> <body> <p>Hello</p> <p>and</p> <p>Goodbye</p> </body> </html>
Была ли эта информация полезной?
