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" :
<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" :
$('#test').addClass('kkk');
Le code HTML ressemblera alors à ceci :
<p class="www zzz kkk" id="test">text</p>
Ajoutez à tous les li la classe test.