jQuery von Kopf bis Fuß (German Edition)

viel mehr zu sagen.
    Machen Sie sich jetzt noch keinen Kopf darüber. Wir werden in Kapitel 6 viel genauer darauf eingehen.
    Probefahrt
    Auf der vorigen Seite steht eine Codezeile, die die »Großeltern« der »fisch«-Elemente entfernt und dem Array $f zuweist. Bauen Sie diese Zeile in die click-Funktion für den
vegetarisch_an-
Button in der meine_skripts.js -Datei ein. Danach öffnen Sie die Seite in Ihrem Browser, um zu testen, ob alles nach Wunsch funktioniert.

    Sie haben’s geschafft! Zeit, die Aufgabenliste zu aktualisieren.
    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 Sie die Vorspeisen finden, die Hamburger enthalten, und den Hamburger durch Portobello-Champignons ersetzen.
    Kopf-Nuss
    Mittlerweile wissen wir, wie man Elemente aus dem DOM entfernt. Aber wie können wir den Inhalt von DOM-Elementen dynamisch durch andere Inhalte ersetzen?

Elemente mit replaceWith verändern
    Mit der Methode
replaceWith
ist es möglich, ausgewählte Elemente durch andere zu ersetzen. Diese praktische jQuery-Methode können Sie immer dann benutzen, wenn Sie etwas im DOM gegen etwas anderes austauschen wollen. Angenommen, Sie möchten die h2-Überschrift mit dem Inhalt »Unser Menü« durch eine Überschrift erster Ordnung mit dem Inhalt »Mein Menü« ersetzen. Dann können Sie dafür die
replaceWith
-Methode verwenden, wie hier gezeigt wird:

Wie kann replaceWith uns helfen?
    Es sollen li-Elemente mit der Klasse »hamburger« gefunden und durch ein
li
-Element mit der Klasse »portobello« ersetzt werden. Lassen Sie uns kurz über das Problem nachdenken, bevor wir unseren Code schreiben.

    Übung
    Schreiben Sie den Code, der
li
-Elemente mit der Klasse »hamburger« findet und durch
li
-Elemente mit der Klasse »portobello« ersetzt. Das unten stehende Diagramm soll Ihnen beim Finden der Lösung helfen. Einen Teil der Antwort haben wir schon für Sie aufgeschrieben. Den Rest machen Sie selbst.
    Lösung zur Übung
    Schreiben Sie den Code, der
li
-Elemente mit der Klasse »hamburger« findet und durch
li
-Elemente mit der Klasse »portobello« ersetzt. Hier ist unsere Lösung.
    Probefahrt
    Fügen Sie den
replaceWith
-Code in die Button-click-Funktion
vegetarisch_an
in Ihrer meine_skripts.js -Datei ein. Öffnen Sie die Seite dann in Ihrem Browser und betätigen Sie den »Vegetarisch«-Button, um sich zu vergewissern, dass alles läuft wie gewünscht.

Denken Sie voraus, bevor Sie replaceWith verwenden
    Was steht als nächstes auf der Checkliste?
    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.
    Sie müssen die Vorspeisen mit der Klasse »fleisch« durch Tofu ersetzen.

    Nein, wir können
replaceWith
hier nicht einsetzen.

    Kopf-Nuss
    Die jQuery-Methode
replaceWith
ist einfach und kann eine Menge. Leider kann sie uns bei diesem Problem nicht weiterhelfen. Warum nicht?

replaceWith funktioniert nicht in jeder Situation
    Die
replaceWith-
Methode funktioniert gut, wenn es um Eins-zu-eins-Ersetzungen geht, beispielsweise wenn die »hamburger«-Klasse durch die »portobello«-Klasse ausgetauscht werden soll.

Eins-zu-viele-Ersetzung
    Die Eins-zu-eins-Methode funktioniert beim nächsten Punkt auf unserer Checkliste aber nicht. Hier müssen wir mehrere verschiedene Zutaten (z. B. Truthahn, Eier, Steak, Lammfleisch) durch eine Zutat (Tofu) ersetzen.

Viele-zu-viele-Ersetzung
    Aber wenn wir später die »tofu«-Elemente auswählen und ersetzen wollen, haben wir ein Problem. Sobald wir die verschiedenen Fleischsorten wieder einbauen wollen, hat das DOM sie alle vergessen. Wir könnten »tofu« durch eine Fleischsorte ersetzen, aber das wollen wir ja nicht. Daher müssen wir diese Ersetzung in der Speisekarte in zwei Schritten durchführen:

    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.

HTML-Inhalte in das DOM einfügen
    Bisher haben wir DOM-Elemente nur entfernt oder ersetzt. Zum Glück haben sich die Entwickler der jQuery-Bibliothek auch Möglichkeiten ausgedacht, um Sachen in das DOM einzufügen.