Ajouter une classe à un élément en jQuery

Je rappelle que dans l'attribut class du code HTML, on peut écrire plusieurs classes séparées par un espace.

Imaginons la situation suivante - vous voulez ajouter une nouvelle classe à celles existantes, sans écraser ces dernières. Dans ce cas, il ne suffit pas de faire .attr('class', 'new-class') (en utilisant la méthode attr) - vous écraseriez les classes qui sont déjà présentes dans l'attribut.

On pourrait, bien sûr, d'abord lire les classes qui s'y trouvent, puis ajouter la nôtre avec un espace et tout réécrire dans l'attribut, mais il existe une méthode plus simple - jQuery a prévu pour cela la méthode addClass.

La méthode addClass permet d'ajouter une classe à un élément (ou à des éléments), sans écraser les autres classes. La classe que vous souhaitez ajouter à l'élément est passée en paramètre de cette méthode.

Dans l'exemple suivant, nous avons un élément avec deux classes - class="www zzz" :

html<p class="www zzz" id="test">text</p>

Nous pouvons lui ajouter une troisième classe - kkk. Le contenu de l'attribut deviendra alors - class="www zzz kkk" :

javascript$('#test').addClass('kkk');

Le code HTML ressemblera alors à ceci :

html<p class="www zzz kkk" id="test">text</p>