Как добавить класс jquery

Добавление класса элементу в jQuery

Напоминаю, что в атрибуте class в HTML коде можно писать несколько классов через пробел.

Представим себе такую ситуацию — вы хотите добавить новый класс к имеющимся, не затерев их при этом. В этом случае, просто взять и сделать .attr(‘class’, ‘new-class’) не получится (воспользовавшись методом attr ) — вы затрете те классы, которые уже есть в атрибуте.

Можно, конечно же, сначала считать классы, которые там есть, затем добавить к ним наш класс через пробел и записать все обратно в атрибут, но есть способ проще — в jQuery для таких вещей предусмотрен метод addClass .

Метод addClass позволяет добавить класс элементу (или элементам), не затерев при этом другие классы. Класс, который вы хотите добавить в элемент, принимается параметром этого метода.

В следующем примере у нас есть элемент с двумя классами — class=»www zzz» :

Мы можем добавить к нему еще и третий класс — kkk . В результате содержимое атрибута станет таким — class=»www zzz kkk» :

$(‘#test’).addClass(‘kkk’);

HTML код станет выглядеть так:

Добавьте всем li класс test .

Добавление и удаление класса в Jquery

Для добавления классов к элементу в jquery есть функция addClass(), работа её очень простая, рассмотрим на примере:

Добавление класса

$("#block").addClass("class"); $(".block").addClass("class");

Мы к элементу block добавляем класс class. Мы можем добавлять классы, как по id, так и по классу.

Есть возможность добавлять сразу несколько классов:

$("#block").addClass("class1 class2");

Рассмотрим пример. Создадим белый блок с чёрной рамкой и добавим к нему класс, который окрасит его в красный цвет.

   #block < width: 50px; height: 50px; border: 1px solid #000; >.red    

Удаление класса

Для удаления класса в jquery есть функция removeClass, которая работает аналогично с классом выше, рассмотрим на примере:

$("#block").removeClass("class"); $(".block").removeClass("class");

Удаляем классы у элемента block, также можно удалять несколько классов:

$("#block").removeClass("class1 class2");

Есть возможность удалить все классы, для этого функции мы не передаём параметров:

$("#block").removeClass();

Пример работы. Удалим у нашего блока класс, который делает его красным цветом:

   #block < width: 50px; height: 50px; border: 1px solid #000; >.red    

Как добавить класс всем элементам с классом равным ID выбранного элемента?

Необходимо, чтобы при клике, например, на «text3», всем элементам с классом «863» добавлялся класс «select».

Отслеживать
371 1 1 золотой знак 5 5 серебряных знаков 13 13 бронзовых знаков
задан 23 авг 2012 в 7:01
279 4 4 золотых знака 8 8 серебряных знаков 29 29 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

$('.lek > span').click(function()< var parentId = $(this).parent().attr('id'); // var className = $(this).attr('class'); $('.' + parentId).addClass('select'); >); 

• Child Selector (“parent > child”)
• .parent()
• .attr()
• .addClass()

Отслеживать
ответ дан 23 авг 2012 в 7:09
12.3k 1 1 золотой знак 25 25 серебряных знаков 33 33 бронзовых знака
Класс добавляется текущему элементу, а нужно чтобы всем элементам на странице.
23 авг 2012 в 8:41

т.е. даже несуществующим в данный момент на странице? тов. @karmadro4 когда-то предлагал способ динамического добавления стилей в css, вот попробуйте

23 авг 2012 в 8:55

Нет, только существующим. В вашем варианте класс «select» добавляется к элементу по которому кликнул, т.е. к элементу «span».

23 авг 2012 в 9:03

>В вашем варианте класс «select» добавляется к элементу по которому кликнул нет если нужно, чтобы добавлялся только к ссылкам, например, измените селектор на $(‘a.’ + parentId)

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)

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

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

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

   Добавление класса к элементу (jQuery метод .addClass()) 
.redColor  color: red; /* цвет текста красный */ > .transition  transition: .5s; /* эффект перехода занимает пол секунды */ >
  $( document ).ready(function() $("p").click(function() // задаем функцию при нажатиии на элемент $(this).addClass('transition redColor'); // добавляем элементу 
по которому произведен клик два класса >); >);  Обычный абзац Обычный абзац Обычный абзац Обычный абзац  

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

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

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

   Получение индекса и имени класса элемента в наборе. 
.redColor  color: red; /* цвет текста красный */ > .greenColor  color: green; /* цвет текста зеленый */ > div  color: blue; /* цвет текста синий */ >
  $(document).ready(function() $("p").addClass(function(index, currentClass) // задаем функцию в качестве параметра метода .addClass() var addedClass; // создаем переменную if (currentClass == nam">redColor")  // если класс элемента идентичен redColor addedClass nam">greenColor"; // присваиваем значение переменной (соответствует значению класса) $( "div" ).append("
нашёлся с индексом - " + index + " "); // добавляем в элемент 
информацию о индексе элементов, которые были выбраны > return addedClass; // возвращаем значение (значение переменной устанавливается в качестве класса элемента) >); >);  Обычный абзац 
class = "redColor">Обычный абзац 
class = "redColor">Обычный абзац Обычный абзац  

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

jQuery DOM методы

© 2016-2024 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу basicweb.ru@gmail.com

Кажется, вы используете блокировщик рекламы 🙁

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.