jQuery - Classes toevoegen


Met jQuery kun je eenvoudig extra classnamen toevoegen aan bepaalde elementen op een pagina. Denk aan bijvoorbeeld aan het toevoegen van een class aan het eerste of laatste item van een menu of aan bijvoorbeeld elke even en oneven rij van een tabel.

Een aantal voorbeelden zie je in de code hieronder. Hierbij moet gezegd worden dat het onderstaande zoals het eerste en laatste item van een menu ook met CSS gedaan kan worden. Echter zoals bijvoorbeeld 'last-child' werkt dan weer niet in oudere versies van Internet Explorer maar alleen vanaf Internet Explorer 9. Door dit toe te passen met jQuery zoals hieronder is gedaan werkt het weer wel in de oudere versies van Internet Explorer.

$(document).ready(function() {
        $("ul li:first-child").addClass("first");
        $("ul li:last-child").addClass("last");

        $("div.element:first").addClass("first");
        $("div.element:last").addClass("last");

        $("ul li:nth-child(2n)").addClass("sec");

        $("tr:odd").addClass("odd");
        $("tr:even").addClass("even");

        $("li:odd").addClass("odd");
        $("li:even").addClass("even");
});

Classes combineren

Als je in de code bijvoorbeeld dezelfde opmaak wilt toepassen aan twee elementen met verschillende classnamen dan kunnen deze eenvoudig worden gecombineerd. Dit doe je door de classnamen te scheiden door een komma zoals in de code hieronder is te zien.

$(document).ready(function() {
        $(".element1,.element2").css("width","75px");
});

Class toevoegen / verwijderen na klik

Voeg door op een element te klikken een class toe, nogmaals klikken om te verwijderen.

$(document).ready(function() {
        $('a.link').click(function(){
                $('div#nav').toggleClass('active');
        });
});

Classnaam opvragen

Classnaam van een element opvragen gaat als volgt.

$(document).ready(function() {
        var classnaam = $('.element').attr('class');
});

Statement

Controleren of een bepaalde class aanwezig is.

$(document).ready(function() {
        if ($("body").hasClass("layout")) {
        }
});