Each: Schleifen in MooTools vom 03.09.2009 18:27 Uhr

Wenn man eine moderne Webseite hat, und besonders wenn man Webentwickler/ Webdeveloper/ Programmierer ist, dann kommt es natürlich auch vor, dass man den Inhalt Automatisiert anzeigen möchte. Das gilt für Bildergalerien, Kommentarfelder und Dinge wie Tags in Tagclouds. Solche Dinge möchte man nicht immer wieder schreiben und man möchte die Aktionen im Javascript auch nicht immer als eigene Funktion schreiben. Wenn ich zum Beispiel jeden der Div Container, der Kommentare enthält, beim Klicken auf den Titel öffnen möchte, kann ich dazu die ID des Div Containers nutzen. Eine ID ist die Identifikation eines Elements und einzigartig. Es würde zu schweren Fehler kommen, wenn ich jedem Div Container, der Kommentare enthält, die gleiche ID geben würde.
Statt dessen nutze ich das Class Attribut um die Container anzusprechen. Über die Each Schleifen Funktion, kann ich jedem Element ein oder mehrere Events zuweisen und weiss immer noch, welches das aktuelle, also das geklickte Element ist.

$$('.classname').each(function(foo) { //foo ist eines der Elemente. //Hier also keine Globalen Variabeln vergeben, //da diese beim nächsten Element wieder überschrieben werden würden. foo.addEvent('click', function() { //beim Klick auf das jeweilige Element, soll etwas passieren. //wir sind jetzt im geklickten Element und können //diesem einen Element eine Aktion zuweisen //beim Klick auf ein anderes Element passiert das gleiche, //falls wir das wollen und nicht unterbinden. foo.setStyle('backgroundColor', '#009900'); //das geklickte Element bekommt jetzt eine neue Hintergrundfarbe }); });
So lassen sich gleiche Elemente einfach verarbeiten und man muss nicht für jede ID eine Funktion anlegen. Der Quellcode wird übersichtlicher und kleiner, was dazu führt, dass die Seite schneller geladen wir