jQuery von Kopf bis Fuß (German Edition)
Wir meinen die Methoden
before
und
after
.
before
fügt Inhalte vor dem gewählten Element ein und
after
danach.
$(".fleisch") .before ("
Tofu");
after
fügt Inhalte nach dem ausgewählten Element ein.
$(".fleisch") .after ("Tofu");
Spitzen Sie Ihren Bleistift
Schreiben Sie den jQuery-Code, der die Schritte unserer Lösung ausführt.
Fügen Sie die li-Elemente mit der Klasse »tofu« nach den »fleisch«-Elementen ein.
__________________________________________________________________________
Entfernen Sie die Elemente mit der Klasse »fleisch« und speichern Sie sie in einer Variablen.
__________________________________________________________________________
Spitzen Sie Ihren Bleistift: Lösung
Schreiben Sie den jQuery-Code, der die Schritte unserer Lösung ausführt.
Fügen Sie die li-Elemente mit der Klasse »tofu« nach den »fleisch«-Elementen ein.
$(“.fleisch”).after(“Tofu”);
Entfernen Sie die Elemente mit der Klasse »fleisch« und speichern Sie sie in einer Variablen.
$m = $(“.fleisch”).detach();
Damit haben Sie alle Anforderungen auf unserer Checkliste erfüllt:
Finde Elemente mit der Klasse »fisch« und entferne sie aus der Liste.
Finde li-Elemente mit der Klasse »hamburger« und ersetze sie durch Portobello-Champignons.
Finde li-Elemente mit der Klasse »fleisch« und ersetze sie durch Tofu.
Als Nächstes müssen wir den »Menü zurücksetzen«-Button erstellen. Hier kommt das, was der Button tun soll:
Fügen Sie die Fisch-Vorspeisen wieder an ihrer ursprünglichen Position im DOM ein (also vor dem ersten Listeneintrag in der linken Spalte).
Finden Sie Vorspeisen mit Portobello-Champignons und ersetzen Sie sie durch Hamburger.
Finden Sie die Vorspeisen, die Tofu enthalten, und ersetzen Sie sie (in der richtigen Reihenfolge) durch die verschiedenen Fleischsorten.
Lassen Sie uns gleich loslegen und sehen, was wir für die erste Anforderung brauchen.
Wir wissen, wir man
before
benutzt, aber wie geben wir das erste Kindelement an?
Die Auswahl mit Filtermethoden einschränken (Teil 1)
Glücklicherweise bietet jQuery eine Reihe von Filtermethoden, mit denen sich Probleme wie das Finden des ersten Kindelements lösen lassen. Sechs davon wollen wir uns hier ansehen (drei auf dieser Seite, drei auf der nächsten).
first
eq
last
Die
first
-Methode filtert aus den ausgewählten Elementen alles außer dem ersten Element heraus.
Die
eq
-Methode filtert aus den gewählten Elementen alles heraus, was nicht die index-Nummer in den runden Klammern hat.
Die
last
-Methode filtert aus den gewählten Elementen alles außer dem letzten Element heraus.
Anhand eines Gerichts auf der Speisekarte wollen wir uns ansehen, wie diese Methoden funktionieren:
Die Auswahl mit Filtermethoden einschränken (Teil 2)
Und jetzt wollen wir einen Blick auf die Methoden
slice
,
filter
und
not
und ihre Funktionsweisen werfen.
slice
filter
not
Die
slice
-Methode filtert aus der Ergebnisliste alle Elemente aus, deren Indexnummern nicht zwischen den Indexnummern liegen, die in den runden Klammern stehen.
Die
filter
-Methode filtert alle Elemente aus der Ergebnisliste, bis auf diejenigen, auf die der Selektor in den runden Klammern passt.
Die
not
-Method filtert alle Elemente aus der Ergebnisliste, auf die der Selektor in den runden Klammern nicht passt.
Mit den Methoden
filter
und
not
können Sie anhand der als Argumente übergebenen Selektoren eine Untermenge der ausgewählten Elemente erstellen.
Welche dieser Methoden hilft Ihnen damit, das erste Kindelement in der Speisekarte zu finden?
SEIEN Sie das DOM
Ihre Aufgabe ist es, selbst DOM zu spielen. Zeichnen Sie eine Linie von der jQuery-Anweisung zu den Elementen im DOM, die der Selektor zurückgibt. Gehen Sie davon aus, dass das die einzigen Elemente der Seite sind. Die erste Verbindung haben wir schon für Sie gezeichnet.
Spitzen Sie Ihren Bleistift
Schreiben Sie die Zeile jQuery-Code auf, die alle Fisch-Vorspeisen wieder an ihre ursprüngliche Stelle in der Speisekarte einfügt (z. B. das erste Gericht unterhalb von »vorspeisen«).
_____________________________________.before($f);
Seien Sie das DOM: Lösung
Ihre Aufgabe ist es, selbst DOM zu spielen. Zeichnen Sie eine Linie von der jQuery-Anweisung zu den Elementen im DOM, die der Selektor zurückgibt. Gehen Sie davon aus, dass das die einzigen Elemente der Seite sind. Die erste Verbindung haben wir schon für Sie gezeichnet.
Spitzen Sie
Weitere Kostenlose Bücher