Osztály hozzáadása elemhez jQuery-ben

Emlékeztetőül, a class attribútumban az HTML kódban több osztályt is megadhatunk szóközzel elválasztva.

Képzeljük el a következő helyzetet - hozzá szeretnél adni egy új osztályt a meglévőkhöz anélkül, hogy felülírnád azokat. Ebben az esetben nem működik, ha csak simán megtedzed a .attr('class', 'new-class')-t (a attr módszer felhasználásával) - felülírod azokat az osztályokat, amelyek már szerepelnek az attribútumban.

Lehetőség persze van arra, hogy először kiolvasd a meglévő osztályokat, majd hozzáadd hozzájuk az új osztályt szóközzel elválasztva, és visszaírd az egészet az attribútumba, de van egyszerűbb mód is - a jQuery-ben erre a célra létezik a addClass módszer.

A addClass módszer lehetővé teszi egy osztály hozzáadását egy elemhez (vagy elemekhez) anélkül, hogy felülírnád a többi osztályt. A hozzáadni kívánt osztályt a módszer paramétereként adjuk meg.

A következő példában van egy elemünk két osztállyal - class="www zzz":

html<p class="www zzz" id="test">szöveg</p>

Hozzáadhatunk még egy harmadik osztályt is - kkk. Ennek eredményeképpen az attribútum tartalma a következő lesz - class="www zzz kkk":

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

Az HTML kód így fog kinézni:

html<p class="www zzz kkk" id="test">szöveg</p>