# 15: Înlănțuirea - CSS-Tricks

Anonim

Am vorbit de câteva ori acum despre mici atingeri în API-ul jQuery care sunt într-adevăr destul de drăguțe. Totul este bine luat în considerare și rafinat. Înlănțuirea se încadrează cu siguranță în această categorie. Odată ce începeți să îl utilizați și îl înțelegeți, acesta se simte extrem de natural, de parcă nu ar trebui să existe altă cale.

Ideea principală este că utilizați mai multe metode la rând pe o singură colecție de elemente.

De exemplu, să presupunem că după ce fac clic pe un buton vreau să schimb o clasă, precum și să schimb un text. Dar butonul are ceva HTML în interior.

 Open 

Cu jQuery, putem „înlănțui” întreaga serie de acțiuni împreună.

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

Acest lucru este posibil deoarece majoritatea metodelor jQuery, în timp ce sunt utilizate ca setter, returnează un set de elemente la fel ca cel pe care a fost apelată metoda. Uneori, acel set este exact același, la fel ca în cazul removeClassși addClassaici, iar uneori acel set este modificat, așa cum este cazul aici find.

În exemplul cu care am lucrat în videoclip, am vorbit și despre .end()care „se retrage” la un nivel al lanțului.

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

Poate că asta explică mai bine. Când setul de elemente se schimbă, am indentat linia 1 și am observat schimbarea în comentariu. Apoi, când ne .end()întoarcem la un nivel. Acest lucru funcționează indiferent de câte ori schimbați selecția. Totul se termină atunci când utilizați o metodă care returnează altceva decât un set de elemente.