CSS classes en jQuery

Met jQuery kun je eenvoudig een CSS class toevoegen aan een element. Dit zijn enkele voorbeelden:

Op basis van een woord:

  1. // Wanneer je een H1 tag hebt met het woord jQuery daarin, zal de CSS class jquery hieraan toegevoegd worden
  2. $("h1:contains(jQuery)").addClass('jquery');

Overigens is dit hoofdletter gevoelig. Wanneer dat niet wenselijk is kun je dit artikel lezen voor een alternatief filter.

Op basis van extensie

  1. // Vind een link die eindigt op pdf, zip of psd en voeg hier de bijbehorende CSS class aan toe.
  2. $("a[@href$=pdf]").addClass("pdf");
  3. $("a[@href$=zip]").addClass("zip");
  4. $("a[@href$=psd]").addClass("psd");

Met dank aan de voorbeelden op deze pagina.

Wisselen tussen classes

Het is ook heel eenvoudig om te wisselen tussen classes. Dit kan met de functie toggleClass:

  1. $("a").click( function() {
  2.   $("div.voorbeeld").toggleClass("class");
  3. });

Deze class wordt afwisselend toegevoegd of verwijderd

Meerdere classes tegelijk

Het toevoegen van meerdere classes tegelijk is makkelijk:

  1. // Voeg de classes "class1", "class2" en "class3" toe:
  2. $("a").addClass("class1 class2 class3");

Wanneer er al een class is toegewezen aan een element waar een class wordt toegevoegd, dan blijft deze intact

Classes weghalen

Het verwijderen van een class is heel eenvoudig. Dat kan met removeClass:

  1. // Hiermee worden bij alle links de class "link" verwijderd.
  2. $("a").removeClass("link");

Classes om en om

Het ook eenvoudig om een classes toe te voegen aan even en/of oneven elementen.

  1. $("li:even").addClass("even");
  2. $("li:odd").addClass("odd");
  • Oneven
  • Even
  • Oneven
  • Even
  • Oneven
  • Even