#15: Chaining

Wir haben schon mehrmals über kleine Details in der jQuery API gesprochen, die wirklich sehr nett sind. Alles ist gut durchdacht und raffiniert. Chaining gehört definitiv in diese Kategorie. Sobald man anfängt, es zu benutzen und zu verstehen, fühlt es sich extrem natürlich an, als gäbe es keinen anderen Weg.

Die Hauptidee ist, dass man mehrere Methoden nacheinander auf einer einzelnen Sammlung von Elementen verwendet.

Nehmen wir zum Beispiel an, nachdem ich auf einen Button klicke, möchte ich eine Klasse ändern und auch einen Text ändern. Aber der Button enthält etwas HTML.

<button class="button open">
  <span class="icon"></span>
  <span class="text">Open</span>
</button>

Mit jQuery können wir die gesamte Reihe von Aktionen miteinander „verketten“.

$(".button")
  .removeClass("open")
  .addClass("closed")
  .find(".text")
  .text("Closed");

Das ist möglich, weil die meisten jQuery-Methoden, wenn sie als Setter verwendet werden, eine Elementmenge zurückgeben, genau wie die, auf der die Methode aufgerufen wurde. Manchmal ist diese Menge exakt dieselbe, wie im Fall von removeClass und addClass hier, und manchmal ist diese Menge verändert, wie im Fall von find hier.

In dem Beispiel, das wir im Video behandelt haben, sprachen wir auch über .end(), welches eine Ebene in der Kette „zurückspringt“.

$(".button")
  .removeClass("open")  // .button
  .addClass("closed")   // .button
  .find(".text")        // .button .text
    .text("Closed")     // .button .text
    .end();             // .button
  .data("thing");       // GETTER on .button

Vielleicht erklärt das es besser. Wenn sich die Menge der Elemente ändert, habe ich die Zeile eingerückt und die Änderung im Kommentar vermerkt. Dann, wenn wir .end() verwenden, springt es eine Ebene zurück. Das funktioniert, egal wie oft man die Auswahl ändert. Alles endet, wenn man eine Methode verwendet, die etwas anderes als eine Menge von Elementen zurückgibt.