JQuery Kochbuch (German Edition)

selektieren – solange sie sich in einer Funktion abbilden lassen.
    Sie können der Filter-Methode von jQuery entweder einen String (also einen Selektions-Ausdruck) oder eine Funktion übergeben. Nutzen Sie eine Funktion, definiert deren Rückgabewert, ob ein Element selektiert wird. Die übergebene Funktion wird für jedes Element in der aktuellen Selektion ausgeführt und jedes Mal, wenn die Funktion false zurückgibt, wird das entsprechende Element aus der Collection entfernt. Geben Sie true zurück, ist das entsprechende Element nicht betroffen (es bleibt also in der Collection):
jQuery('*').filter(function(){
    return !!jQuery(this).css('backgroundImage');
});
    Dieser Code selektiert alle Elemente mit einem Hintergrund-Bild.
    Die initiale Collection besteht aus allen Elementen (
*
), dann wird die Methode
filter()
mit einer Funktion aufgerufen. Diese Funktion gibt true zurück, wenn für das aktuelle Element ein
backgroundImage
angegeben wurde. Mit
!!
können Sie in JavaScript sehr einfach einen beliebigen Typ in seinen Booleschen Ausdruck umwandeln. Dabei werden unter anderem ein leerer String, die Zahl Null, der Wert
undefined
, der Null-Typ und natürlich der Boolesche Wert false in false umgewandelt. Wenn etwas hiervon von einer Abfrage des
backgroundImage
zurückgegeben wird, liefert die Funktion false, wodurch alle Elemente ohne Hintergrund-Bild aus der Collection entfernt werden. Die meisten dieser eben genannten Rücklieferungsmöglichkeiten sind gar nicht jQuery-spezifisch, sondern es handelt sich um JavaScript-Grundlagen.
    Tatsächlich ist
!!
gar nicht notwendig, weil jQuery selbst den Rückgabewert in einen Booleschen Wert auswertet. Es ist aber trotzdem keine schlechte Idee, es zu verwenden, da jeder, der sich Ihren Code anschaut, gleich weiß, was Sie eigentlich beabsichtigen.
    Innerhalb der Funktion, die Sie an
filter()
übergeben, können Sie sich auf das aktuelle Element über das Schlüsselwort
this
beziehen. Um daraus ein jQuery-Objekt zu machen (so dass Sie auf die jQuery-Methoden zugreifen können), stecken Sie es einfach in die jQuery-Funktion:
this; // Normales Objekt
jQuery(this); // jQuery-Objekt
    Hier ein paar weitere Filter-Beispiele, um Ihre Fantasie ein wenig anzuregen:
// Selektieren aller DIVs mit einer Breite zwischen 100px und 200px:
jQuery('div').filter(function(){
    var width = jQuery(this).width();
    return width > 100 && width < 200;
});

// Selektieren aller Bilder mit einer verbreiteten Namens-Endung:
jQuery('img').filter(function(){
    return /\.(jpe?g|png|bmp|gif)(\?.+)?$/.test(this.src);
});

// Selektieren aller Elemente, die entweder 10 oder 20 Kind-Elemente haben:
jQuery('*').filter(function(){
    var children = jQuery(this).children().length;
    return children === 10 || children === 20;
});
    Diskussion
    Es wird immer viele verschiedene Wege geben, etwas umzusetzen – das ist auch beim Selektieren von Elementen mit jQuery der Fall. Das Hauptunterscheidungsmerkmal ist im allgemeinen die Geschwindigkeit: Manche Wege sind schnell, andere langsam. Wenn Sie einen komplizierten Selektor nutzen, sollten Sie darüber nachdenken, wie viel Arbeit jQuery damit hinter den Kulissen hat. Ein längerer und komplexerer Selektor wird auch länger brauchen, um Ergebnisse zu liefern. Die nativen Methoden von jQuery können manchmal viel schneller als ein einzelner Selektor sein und zudem verbessert sich auch oft die Lesbarkeit. Vergleichen Sie einmal diese beiden folgenden Techniken:
jQuery('div a:not([href^=http://]), p a:not([href^=http://])');

jQuery('div, p').find('a').not('[href^=http://]');
    Die zweite Version ist kürzer und deutlich besser lesbar als die erste. Tests in Firefox (v3) und Safari (v4) zeigen zudem, dass sie auch schneller ist.

Den Kontext-Parameter verwenden
    Problem
    Sie haben zwar schon vom Kontext-Parameter gehört, haben aber noch keine Situation gefunden, in der er nützlich ist.
    Lösung
    Beim Übergeben eines Selektions-Ausdruck an
jQuery()
oder
$()
können Sie auch ein zweites Argument mitgeben, das den Kontext festlegt. Der Kontext ist der Bereich, in dem jQuery nach den Elementen sucht, die Ihr Selektions-Ausdruck finden soll.
    Der Kontext-Parameter ist das angesichts seiner Nützlichkeit vermutlich am wenigsten angewandte jQuery-Feature. Dabei ist seine Anwendung denkbar einfach: Sie übergeben einen Selektions-Ausdruck, ein jQuery-Objekt, eine DOM-Collection oder einen DOM-Knoten und jQuery wird nur in diesem Rahmen nach den Elementen suchen.
    Hier ein