jQuery von Kopf bis Fuß (German Edition)

Ihren Bleistift: Lösung
    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«).
$(".vorspeisen li").first() .before($f);

Der Hamburger kommt zurück!
    Damit ist die erste Anforderung für den »Zurücksetzen«-Button erfüllt. Zwei haben wir noch:
    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.
    Unser nächster Punkt auf der Checkliste kommt einem ein bisschen vor, wie ein Déjà-vu, oder? Im Prinzip müssen wir die ursprüngliche Ersetzung nur umkehren. Warum? Weil wir es hier mit einer Eins-zu-eins-Ersetzung zu tun haben. Und die haben wir besonders gern, weil sie so einfach sind.

    Übung
    Erinnern Sie sich an diese Übung? Wir werden sie einfach umdrehen. Schreiben Sie den Code auf, der alle
li
-Elemente mit der »portobello«-Klasse findet und durch
li
-Elemente der »hamburger«-Klasse ersetzt. Das unten stehende Diagramm soll Ihnen beim Finden der Lösung helfen. Einen Teil der Antwort haben wir schon für Sie aufgeschrieben. Der Rest ist für Sie.
    Lösung zur Übung
    replaceWith
bringt alles in einem Rutsch wieder an Ort und Stelle. Gut gemacht!

Wo ist das Rind (äh, Fleisch)?
    Für den »Zurücksetzen«-Button fehlt uns jetzt nur noch ein Punkt auf der Checkliste:
    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.
    Was haben wir noch mal mit den li-Elementen gemacht? Ein kurzer Blick zurück:
    Wir haben die
li.tofu
-Elemente nach den Elementen mit der Klasse »Fleisch« eingefügt.
$(".fleisch").after("

Tofu

");
    Wir haben die li.fleisch-Elemente aus dem DOM entfernt und in
$m
gespeichert.
$m = $(".fleisch").detach();
    Und wo sind diese Elemente jetzt? Und wie bekommen wir sie zurück?

Ein fleischiges Array
    Wie Sie wissen, erhält die Variable beim Speichern von jQuery-Elementen ein Dollarzeichen. Damit wird angezeigt, dass die verwendete Variable eine besondere Art der Speicherung verwendet. In unserem Fall ist das ein jQuery-Array. Hier sehen Sie, wie die Elemente in
$m
gepeichert wurden:

    Kopf-Nuss
    Sie müssen die einzelnen
li.fleisch
-Elemente wieder an die Stelle der
li.tofu
-Elemente zurückschieben. Sie haben bereits viele Methoden kennengelernt, um Elemente wieder ins DOM einzubauen. Welche Methode würden Sie in dieser Situation verwenden?

Die each-Methode kann eine Schleife über ein Array ausführen
    In Kapitel 3 haben Sie gesehen, wie man die
each
-Methode verwenden kann, um eine Schleife über mehrere Elemente auszuführen. Das können wir auch hier verwenden, um eine Schleife über sämtliche »fleisch«-Elemente im Array
$m
zu erzeugen und sie wieder an ihrem ursprünglichen Ort zu platzieren. Dafür müssen wir uns die Funktionsweise von
each
aber noch etwas genauer ansehen.

    Die each-Methode funktioniert wie ein Fließbandroboter für Ihre Elemente.
    jQuery-Magneten
    Bringen Sie die Codemagneten in die korrekte Reihenfolge, so dass der
zuruecksetzen
-Button wie gewünscht funktioniert. Ein paar Magneten haben wir schon für Sie platziert.
    jQuery-Magneten: Lösung
    Bringen Sie die Codemagneten in die korrekte Reihenfolge, so dass der
zuruecksetzen
-Button wie gewünscht funktioniert. Ein paar Magneten haben wir schon für Sie platziert.

Das war’s ... oder?
    Alle Anforderungen für den »Zurücksetzen«-Button sind erfüllt. Wir müssen also nur noch unsere Projektdateien aktualisieren und sind fertig.
    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 richten Reihenfolge) durch die verschiedenen Fleischsorten.

    Hoppla! Ja, stimmt.
    Zum Glück