Add Class jQuery: Tips and Tricks

Метод addClass в jQuery позволяет добавлять CSS-классы к выбранным элементам на странице. Этот метод принимает один или несколько параметров, каждый из которых может содержать один или несколько CSS-классов, которые нужно добавить к выбранным элементам.

Пример использования метода addClass в jQuery:

HTML-разметка:

html
Пример использования метода addClass в jQuery

Javascript-код с использованием метода addClass:

javascript
// выбираем элемент с id="myDiv"
var myDiv = $("#myDiv");
// добавляем ему классы "large-text" и "red"
myDiv.addClass("large-text red");

Результат:

html
Пример использования метода addClass в jQuery

В данном примере мы выбрали элемент с id="myDiv" с помощью селектора jQuery "$("#myDiv")" и добавили к нему классы "large-text" и "red" с помощью метода addClass("large-text red").

Также можно использовать addClass в цикле:

HTML-разметка:

html

  
Элемент 1
  
Элемент 2
  
Элемент 3

Javascript-код с использованием метода addClass в цикле:

javascript
// выбираем все элементы списка
var listItems = $("#myList li");
// добавляем каждому элементу класс "blue"
listItems.each(function() {
  $(this).addClass("blue");
});

Результат:

html

  
Элемент 1
  
Элемент 2
  
Элемент 3

В данном примере мы выбрали все элементы списка с помощью селектора jQuery "$("#myList li")" и добавили к каждому элементу класс "blue" с помощью метода addClass("blue"), использовав цикл each.