Elementen even/odd als Klasse hinzufügen (nth-of-class)

Hast du dich auch schon gewundert, wieso es zwar einen :nth-child() und einen :nth-of-type(), aber keinen :nth-of-class() Selektor in CSS gibt? In diesem Beitrag zeigen wir dir, wie du dies mithilfe einer einfachen JS-Funktion umsetzen kannst.

Die JS-Funktion nthofclass() macht genau dies, was der fehlende :nth-of-class() Selektor tun würde. Die Funktion unterscheidet zwischen gerade und ungerade und weist einer Gruppe von Elementen abwechselnd eine Klasse zu. Jedes Element in der Gruppe erhält entweder die Klasse even oder odd unabhängig des Indexes im DOM.

Die Funktion durchläuft alle Elemente der übergebenen Klasse/n, und erhöht dabei den counter. Wenn der Zähler eine gerade Zahl erreicht, wird dem aktuellen Element die Klasse even zugewiesen. Bei einer ungeraden Zahl erhält das Element die Klasse odd. Ob es sich beim counter um eine ungerade oder gerade Zahl handelt, wird über den Modulo-Operator unterschieden.

jQuery(document).ready(function ($) {


    function nthofClass(classes) {

        var counter = 0;
        $(classes).each(function () {
            counter++;
            if ( counter % 2 == 0 ) {
                $(this).addClass('even');
            } else {
                $(this).addClass('odd');
            } // endif
        });

    } // function

    nthofClass('.postit');

} // ready

Nachdem den Elementen mit der Klasse postit per JS odd oder even hinzugefügt wurde, sind die Elemente über den Selektor odd und even im CSS auswählbar.

.even {
    margin: 100px 0;
    transform: rotate(-1.5deg);
}


.odd {
    margin: 100px 0;
    transform: rotate(1.5deg);
}