Luokan lisääminen elementtiin jQuery:ssä
Muistutan, että
class
-attribuuttiin
HTML-koodissa voi kirjoittaa useita
luokkia välilyönnillä erotettuna.
Kuvittele tilanne, jossa haluat
lisätä uuden luokan olemassa oleviin poistamatta
niitä. Tässä tapauksessa pelkän
.attr('class', 'new-class')
tekeminen ei onnistu (käyttämällä
attr
-metodia)
- sillä poistaisit luokat, jotka
jo ovat attribuutissa.
Voisimme tietysti ensin lukea luokat,
jotka siellä ovat, sitten lisätä niihin meidän
luokkamme välilyönnillä ja kirjoittaa kaiken takaisin
attribuuttiin, mutta on helpompikin tapa - jQuery:ssä
tällaisia tapauksia varten on tarjolla metodi
addClass.
addClass-metodi mahdollistaa luokan
lisäämisen elementtiin (tai elementteihin) poistamatta
samalla muita luokkia. Lisättävä luokka annetaan
metodin parametrina.
Seuraavassa esimerkissämme on elementti, jolla on
kaksi luokkaa - class="www zzz":
<p class="www zzz" id="test">text</p>
Voimme lisätä siihen kolmannen luokan -
kkk. Tuloksena attribuutin sisällöksi
tulee class="www zzz kkk":
$('#test').addClass('kkk');
HTML-koodi näyttää tältä:
<p class="www zzz kkk" id="test">text</p>
Lisää kaikille li-elementeille luokka test.
