Ein Artikel von Paul Lunow, erschienen 2009 auf Interaktionsdesigner.de.

Zuletzt überarbeitet am von : .

Denkst Du darüber nach zu gründen? Eine Familie oder ein Startup oder beides? In der zweiten Staffel meines Podcasts spreche ich mit tollen Menschen genau darüber. Lass Dich inspirieren und abonniere meinen Podcast: Auf Apple Podcast, Spotify und auf www.gründerväter.net.

Einfach gesagt ist Moduloteilen durch ganze Zahlen und den Rest zurück kriegen. Der Operator ist in PHP und JavaScript das Prozentzeichen (%). So kann das Ergebnis aussehen: 0 modulo 5 = 0 1 modulo 5= 1 2 modulo 5= 2 3 modulo 5 = 3 4 modulo 5 = 4 5 modulo 5 = 0 6 modulo 5 = 1 7 modulo 5 = 2 8 modulo 5 = 3 9 modulo 5 = 4 Der PHP Code der das erzeugt hat ist der hier:

<?
    for($i = 0; $i < 10; $i++) {
        echo "$i modulo 5 = ". ($i%5). "<br>";
    }
?>

Wenn einem jetzt nicht auf Anhieb ein Anwendungsfall einfällt, dann sollte man sich überlegen was dieser Code tut:

<?
    $a = 0;
    $class = "";
    for($i = 0; $i < 10; $i++) {
        $a++;
        if($a > 1)
            $a = 0;
        $class = $a == 1 ? "even" : "odd";
        echo "$i modulo 5 = ". ($i%5). " ($class)<br>";
    }
?>

Richtig,jede zweite Zeile wird anders behandelt. Dazu wird $a erhöht und wenn es 2 ist wieder auf Null gesetzt um anschließend je nach Wert ein Namen auszugeben (z.B. für Zebrastreifen). Funktioniert, hat aber gedauert zu tippen und geht viel einfacher: Das ist die Ausgabe bei Modulo 2: 0 modulo 2 = 0 1 modulo 2 = 1 2 modulo 2 = 0 3 modulo 2 = 1 4 modulo 2 = 0 5 modulo 2 = 1 6 modulo 2 = 0 7 modulo 2 = 1 8 modulo 2 = 0 9 modulo 2 = 1 Dämmerts? $i wird durch 2 geteilt. Dabei bleibt immer 1 oder 0 übrig. Egal um welche Zahl es geht. Na dann:

<?
    $class = "";
    for($i = 0; $i < 10; $i++) {
        $class = $i%2 ? "even" : "odd";
        echo "$i modulo 2 = ". ($i%2). " ($class)<br>";
    }
?>

Herrlich, oder? Schnell, effektiv, zuverlässig und in allen Sprachen einsetzbar. Mehr braucht man darüber gar nicht zu wissen :) Aber lovely jQuery erpart uns natürlich das Rechnen. Hier gibt es die Psydoklassen (beginnen mit einem Doppelpunkt) :even und :odd. Damit wird jedes zweite, bzw. erste Element ausgewählt.

$("ul li:even").addClass("even");

Fügt jeder zweiten Zeile eine Klasse hinzu. Und wenn dieses Funktion bei mehreren Listen die verändert werden sollen anfängt rumzuspinnen, dann muss man sich klar machen, dass der Selektor $(“ul li:even”) alle zweiten Listenelemente auf der Seite trifft. Unabhängig davon in welcher Liste sie sich befinden. Die Lösung ist mal wieder einfach: $(“ul”) selektiert alle Listen und dann behandeln wir jedes Listenelement einzelnd:

$("ul").find("li:even").addClass("zebra");

Viel Spaß und mit Mathe jQuery!