# 15: Kedjning - CSS-tricks

Anonim

Vi har pratat ett antal gånger nu om små detaljer i jQuery API som verkligen är trevliga. Allt är väl övervägt och förfinat. Kedjor faller definitivt in i den kategorin. När du väl börjar använda den och förstår den känns det extremt naturligt, som om det inte borde finnas något annat sätt.

Huvudidén är att du använder flera metoder i rad på en enda samling av element.

Låt oss till exempel säga att efter att jag har klickat på en knapp vill jag ändra klass samt ändra text. Men knappen har lite HTML inuti.

 Open 

Med jQuery kan vi ”kedja” hela serien av åtgärder tillsammans.

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

Detta är möjligt eftersom de flesta av jQuerys metoder, även om de används som setter, returnerar en elementuppsättning precis som den metoden kallades på. Ibland är den uppsättningen exakt densamma, som är fallet med removeClassoch addClasshär, och ibland ändras den uppsättningen som är fallet här med find.

I exemplet vi arbetade med i videon pratade vi också om .end()vilka som "backar ut" en nivå i kedjan.

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

Det kanske förklarar det bättre. När uppsättningen av element ändras, indragade jag raden en och noterade förändringen i kommentaren. Sedan när vi .end()backar tillbaka en nivå. Detta fungerar oavsett hur många gånger du ändrar valet. Allt slutar när du använder en metod som returnerar något annat än en uppsättning element.