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":
<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":
$('#test').addClass('kkk');
Az HTML kód így fog kinézni:
<p class="www zzz kkk" id="test">szöveg</p>
Adj minden li elemhez hozzá a test osztályt.