JQuery Kochbuch (German Edition)

Arrays und Objekte iterieren
    Problem
    Sie müssen über jedes Element in einem Array oder Attribut eines Objekts iterieren oder es in einer Schleife durchlaufen.
    Lösung
(function($) {
    $(document).ready(function() {
     var months = [ 'Januar', 'Februar', 'März', 'April', 'Mai',
     'Juni', 'Juli', 'August', 'September', 'Oktober',
     'November', 'Dezember'];
     $.each(months, function(index, value) {
     $('#months').append('

' + value + '

');
     });

     var days = { Montag: 1, Dienstag: 2, Mittwoch: 3,
     Donnerstag: 4, Freitag: 5, Samstag: 6, Sonntag: 7 };
     $.each(days, function(key, value) {
     $('#days').append('

' + key + ' (' + value + ')

');
     });
    });
})(jQuery);
    Diskussion
    In diesem Rezept iterieren wir mit
$.each()
sowohl über ein Array als auch über ein Objekt. Dabei handelt es sich um eine elegante Schnittstelle für die häufig vorkommende Aufgabe der Iteration. Das erste Argument von
$.each()
ist das Array oder das Objekt, über das iteriert werden soll, während das zweite die Callback-Methode ist, die für jedes Element aufzurufen ist. (Beachten Sie, dass dies etwas anders ist als bei der jQuery-Collection-Methode
$('div').each()
, deren erstes Argument die Callback-Funktion ist.)
    Wenn die vom Entwickler definierte Callback-Funktion aufgerufen wird, enthält die Variable
this
den Wert des aktuellen Elements. Das vorherige Beispiel kann also auch wie folgt geschrieben werden:
(function($) {
    $(document).ready(function() {
     var months = [ 'Januar', 'Februar', 'März', 'April', 'Mai',
     'Juni', 'Juli', 'August', 'September', 'Oktober',
     'November', 'Dezember'];
     $.each(months, function() {
     $('#months').append('

' + this + '

');
     });

     var days = { Montag: 1, Dienstag: 2, Mittwoch: 3,
     Donnerstag: 4, Freitag: 5, Samstag: 6, Sonntag: 7 };
     $.each(days, function(key) {
     $('#days').append('

' + key + ' (' + this + ')

');
     });
    });
})(jQuery);

Arrays mit jQuery.grep filtern
    Problem
    Sie müssen Elemente in einem Array filtern und entfernen.
    Lösung
(function($) {
    $(document).ready(function() {
     var months = [ 'Januar', 'Februar', 'März', 'April', 'Mai',
     'Juni', 'Juli', 'August', 'September', 'Oktober',
     'November', 'Dezember'];
     months = $.grep(months, function(value, i) {
     return ( value.indexOf('J') == 0 );
     });
     $('#months').html( '

' + months.join('

') + '

' );
    });
})(jQuery);
    Diskussion
    Dieses Rezept nutzt die Methode
$.grep()
, umdas Array
months
so zu filtern, dass es nur Einträge enthält, die mit dem Großbuchstaben
J
beginnen. Die Methode
$.grep
gibt das gefilterte Array zurück. Der vom Entwickler definierten Callback-Methode werden zwei Argumente übergeben. Sie muss den Booleschen Wert
true
zurückgeben, wenn ein Element beibehalten werden soll, oder
false
, wenn es verworfen werden kann. Das erste Argument ist der Wert des Array-Elements (in diesem Fall der Monat), während das zweite den inkrementierten Wert des Schleifendurchlaufs der Methode
$.grep()
angibt. Wenn Sie zum Beispiel die »ungeraden« Monate entfernen möchten, können Sie prüfen, ob
( i % 2 ) == 0
gilt, wobei der linke Teil des Ausdrucks den Rest von i / 2 liefert. (
%
ist der Modulo-Operator, der den Rest einer Division zurückgibt. Ist
i = 4
, ergibt
i
geteilt durch
2
den Rest
0
.)
(function($) {
    $(document).ready(function() {
     var months = [ 'Januar', 'Februar', 'März', 'April', 'Mai',
     'Juni', 'Juli', 'August', 'September', 'Oktober',
     'November', 'Dezember'];
     months = $.grep(months, function(value, i) {
     return ( i % 2 ) == 0;
     });
     $('#months').html( '

' + months.join('

') + '

' );
    });
})(jQuery);

Über Array-Elemente mit jQuery.map iterieren und sie verändern
    Problem
    Sie wollen über jedes Element in einem Array iterieren und dessen Wert verändern.
    Lösung
(function($) {
    $(document).ready(function() {
     var months = [ 'Januar', 'Februar', 'März', 'April', 'Mai',
     'Juni', 'Juli', 'August', 'September', 'Oktober',
     'November', 'Dezember'];
     months = $.map(months, function(value, i) {
     return value.substr(0, 3);
     });
     $('#months').html( '

' + months.join('

') + '

' );
    });
})(jQuery);
    Diskussion
    In diesem Rezept iteriert
$.map()
über das Array
months
und gibt abgekürzte Versionen (die ersten drei Zeichen) der Monatsnamen zurück. Die Methode
$.map()
erwartet ein Array und eine Callback-Methode als Argument, iteriert dann über jedes Array-Element und führt dazu die Callback-Funktion aus. Das