JQuery Kochbuch (German Edition)

Titel: JQuery Kochbuch (German Edition) Kostenlos Bücher Online Lesen
Autoren: jQuery Community Experts

Vom Netzwerk:

ansonsten
    // prüfen wir, ob der Wert true ergibt:
    return val ? jQuery(elem).data(key) == val : !!jQuery(elem).data(key);

};
    Der Grund für solch einen komplexen regulären Ausdruck liegt darin, dass wir so flexibel wie möglich bleiben wollen. Der neue Selektor kann auf viele verschiedene Arten genutzt werden:
// Wie zuerst ausgedacht:
jQuery('div:data("something",123)');

// Prüfen, ob etwas einen "wahren" Wert hat
jQuery('div:data(something)');

// Mit oder ohne (innere) Anführungszeichen:
jQuery('div:data(something, "something else")');
    Jetzt haben wir eine ganz neue Möglichkeit, Daten abzufragen, die jQuery für ein Element verwaltet.
    Wenn Sie einmal mehr als einen neuen Selektor gleichzeitig hinzufügen wollen, ist es am besten, die jQuery-Methode
extend()
zu nutzen:
jQuery.extend(jQuery.expr[':'], {
    newFilter1 : function(elem, index, match){
     // true oder false zurückgeben.
    },
    newFilter2 : function(elem, index, match){
     // true oder false zurückgeben.
    },
    newFilter3 : function(elem, index, match){
     // true oder false zurückgeben.
    }
});

Chapter 3. Fortgeschrittene Techniken
    Ralph Whitbeck

Ein Set mit selektierten Ergebnissen durchlaufen
    Problem
    Sie wollen aus Ihrem Set mit selektierten DOM-Elementen eine Liste erstellen, aber bei Aktivitäten mit dem Set wird dieses immer als Ganzes angesehen. Um eine Liste mit den einzelnen Elementen zu erzeugen, müssen Sie für jedes Element des Sets eine Aktion durchführen.
    Lösung
    Gehen wir einmal davon aus, dass Sie eine Liste erstellen wollen, in der jeder Link innerhalb eines bestimmten DOM-Elements aufgeführt ist (vielleicht handelt es sich um eine Site mit vielen durch die Anwender bereitgestellten Inhalten und Sie wollen die angegebenen Links noch schnell überprüfen, bevor Sie sie an die Benutzer ausgeben). Wir erstellen also zunächst unsere jQuery-Selektion
$("div#post a[href]")
, mit der alle Links mit einem
href
-Attribut innerhalb des

mit der
id
mit dem Wert
post
selektiert werden. Dann durchlaufen wir jedes gefundene Element und tragen es in ein Array ein. Schauen Sie sich das folgende Code-Beispiel an:
var urls = []; $("div#post a[href]").each(function(i) { urls[i] = $(this).attr('href'); }); alert(urls.join(","));
    Das Array konnten wir füllen, weil wir mit der Methode
$().each();
durch jedes Element im jQuery-Objekt iteriert sind. Durch das »Umhüllen« der Variablen
this
in einem jQuery-Wrapper
$()
konnten wir auf die einzelnen Elemente zugreifen und jQuery-Methoden darauf anwenden.
    Diskussion
    jQuery stellt eine Basis-Methode bereit, mit der Sie durch ein Set mit selektierten DOM-Elementen iterieren können.
$().each()
ist die jQuery-Version einer
for
-Schleife, mit der jedes Element im Set durchlaufen und ein eigener Funktions-Gültigkeitsbereich bereitgestellt wird.
$().each();
durchläuft nur jQuery-Objekte.
    ----
    Warning
    $().each();
ist nicht das Gleiche wie die jQuery-Hilfsmethode
jQuery.each(object, callback);
. Die Methode
jQuery.each
ist eine allgemeinere Iterator-Methode, die sowohl Objekte als auch Arrays durchläuft. In der Online-Dokumentation von jQuery finden Sie mehr Informationen zu
jQuery.each()
(siehe http://docs.jquery.com/Utilities/jQuery.each ).
    ----
    Bei jeder Iteration holen wir das Attribut
href
des aktuellen Elements. Wir können dabei mit dem Schlüsselwort
this
auf das aktuelle DOM-Element zugreifen. Dann verpacken wir es per
$(this)
als jQuery-Objekt, so dass wir jQuery-Methoden darauf anwenden können – in unserem Fall das
href
-Attribut auslesen. Schließlich weisen wir dieses Attribut einem globalen Array
urls
zu.
    Um dann zu sehen, was wir da erstellt haben, lassen wir uns das URL-Array durch Kommas getrennt in einer Alert-Box ausgeben. Wir hätten die URLs auch als ungeordnete Liste ausgeben lassen können. Am sinnvollsten ist es natürlich, die Liste ins JSON-Format umzuwandeln und an den Server zu schicken, um sie dort verarbeiten zu lassen.
    Lassen Sie uns ein weiteres Beispiel für
$().each();
anschauen. Dieses Beispiel ist vermutlich das naheliegendste. Stellen Sie sich vor, dass wir eine ungeordnete Liste mit Namen haben und wir die Namen besser hervorheben wollen. Dazu können wir jedem zweiten Listen-Element eine andere Hintergrundfarbe verpassen:
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">