Vi har talt et antal gange nu om små detaljer i jQuery API, der er rigtig gode. Alt er velovervejet og raffineret. Kæde falder helt sikkert ind i den kategori. Når du først begynder at bruge det og forstår det, føles det ekstremt naturligt, som om der ikke skulle være nogen anden måde.
Hovedideen er, at du bruger flere metoder i træk på en enkelt samling af elementer.
Lad os for eksempel sige, at når jeg har klikket på en knap, vil jeg ændre klasse samt ændre tekst. Men knappen har nogle HTML indeni.
Open
Med jQuery kan vi "kæde" hele handlingsserien sammen.
$(".button") .removeClass("open") .addClass("closed") .find(".text") .text("Closed");
Dette er muligt, fordi de fleste af jQuerys metoder, mens de bruges som en setter, returnerer et element sæt ligesom det, metoden blev kaldt på. Nogle gange er dette sæt nøjagtigt det samme, som det er tilfældet med removeClass
og addClass
her, og nogle gange ændres det sæt, som det er tilfældet her med find
.
I eksemplet, vi arbejdede med i videoen, talte vi også om, .end()
hvilke der "bakker" et niveau på kæden.
$(".button") .removeClass("open") // .button .addClass("closed") // .button .find(".text") // .button .text .text("Closed") // .button .text .end(); // .button .data("thing"); // GETTER on .button
Måske forklarer det det bedre. Når sæt af elementer ændres, indrykkede jeg linjen en og bemærkede ændringen i kommentaren. Så når vi .end()
bakker det ud et niveau. Dette fungerer, uanset hvor mange gange du ændrer markeringen. Det hele slutter, når du bruger en metode, der returnerer noget andet end et sæt elementer.