Dodawanie klasy do elementu w jQuery
Przypominam, że w atrybucie
class
w kodzie HTML można wpisać kilka
klas oddzielonych spacją.
Wyobraźmy sobie taką sytuację - chcesz
dodać nową klasę do istniejących, nie nadpisując
ich przy tym. W tym przypadku, po prostu zrobić
.attr('class', 'new-class')
się nie uda (wykorzystując metodę
attr)
- nadpiszesz te klasy, które
są już w atrybucie.
Można, oczywiście, najpierw odczytać klasy,
które tam są, następnie dodać do nich naszą
klasę przez spację i zapisać wszystko z powrotem
do atrybutu, ale jest sposób prostszy - w jQuery
dla takich rzeczy przewidziano metodę
addClass.
Metoda addClass pozwala dodać
klasę elementowi (lub elementom), nie nadpisując
przy tym innych klas. Klasa, którą
chcesz dodać do elementu, jest przyjmowana jako
parametr tej metody.
W następnym przykładzie mamy element z
dwoma klasami - class="www zzz":
<p class="www zzz" id="test">text</p>
Możemy dodać do niego jeszcze i trzecią klasę -
kkk. W wyniku zawartość atrybutu
stanie się taka - class="www zzz kkk":
$('#test').addClass('kkk');
Kod HTML będzie wyglądać tak:
<p class="www zzz kkk" id="test">text</p>
Dodaj wszystkim li klasę test.