Schreibe einen Kommentar

Arrays mit jQuery.grep filtern

Wenn man über jQuery spricht, geht es häufig um die Hauptkonzepte – das Bearbeiten des DOM und der Styles sowie die Events. Es gibt aber noch eine ganze Reihe weiterer “Core”-Features und Hilfsfunktionen, die dem Entwickler entgegenkommen. Dies ist eine der nicht so bekannten Hilfsmethoden von jQuery.

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( '<li>'+ months.join ('</li><li>') + '</li>');
    });
})(jQuery);

Ideal sowohl für den Einsteiger wie auch für den JavaScript-Veteranen - das jQuery Kochbuch

Diskussion
Dieses Rezept nutzt die Methode $.grep(), um das Array months so zu filtern, dass es nur Einträge entä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('<li>'+ months.join('</li><li>') + '</li>' ));
    });
})(jQuery);

Mit diesem und weiteren Rezepten aus dem jQuery Kochbuch lernen Sie praxisbewährte Lösungen von einem Dutzend der führenden Entwickler, die jQuery für wirklich alles einsetzen: von der Integration simpler Komponenten in Webseiten bis hin zur Entwicklung komplexer, hochperformanter User-Schnittstellen.

Sag's weiter:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.