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":

html<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":

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

HTML-koodi näyttää tältä:

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