Klasse toevoegen aan een element in jQuery

Ik herinner u eraan dat in het attribuut class in HTML-code meerdere klassen geschreven kunnen worden, gescheiden door een spatie.

Stel je de volgende situatie voor - je wilt een nieuwe klasse toevoegen aan de bestaande, zonder deze te overschrijven. In dit geval zal het simpelweg doen van .attr('class', 'new-class') niet werken (door gebruik te maken van de methode attr) - je zult de klassen die al in het attribuut staan overschrijven.

Je kunt natuurlijk eerst de klassen uitlezen, die er staan, dan onze klasse toevoegen met een spatie erbij en alles terugschrijven naar het attribuut, maar er is een eenvoudigere manier - in jQuery is hiervoor de methode addClass beschikbaar.

De methode addClass maakt het mogelijk om een klasse aan een element (of elementen) toe te voegen, zonder daarbij andere klassen te overschrijven. De klasse die je wilt toevoegen aan het element, wordt als parameter aan deze methode doorgegeven.

In het volgende voorbeeld hebben we een element met twee klassen - class="www zzz":

We kunnen er een derde klasse aan toevoegen - kkk. Als gevolg hiervan wordt de inhoud van het attribuut class="www zzz kkk":

De HTML-code ziet er dan zo uit: