Abbiamo parlato diverse volte di piccoli tocchi nell'API jQuery che sono davvero molto carini. Tutto è ben curato e raffinato. Il concatenamento rientra sicuramente in quella categoria. Una volta che inizi a usarlo e lo capisci, sembra estremamente naturale, come se non ci fosse altro modo.
L'idea principale è utilizzare più metodi di seguito su una singola raccolta di elementi.
Ad esempio, diciamo che dopo aver fatto clic su un pulsante voglio cambiare una classe e anche del testo. Ma il pulsante ha un po 'di HTML all'interno.
Open
Con jQuery, possiamo "concatenare" l'intera serie di azioni insieme.
$(".button") .removeClass("open") .addClass("closed") .find(".text") .text("Closed");
Ciò è possibile perché la maggior parte dei metodi di jQuery, sebbene usati come setter, restituiscono un set di elementi proprio come quello su cui è stato chiamato il metodo. A volte quell'insieme è esattamente lo stesso, come nel caso di removeClass
e addClass
qui, ea volte quell'insieme è alterato come nel caso qui con find
.
Nell'esempio con cui abbiamo lavorato nel video, abbiamo anche parlato di .end()
quale "retrocede" di un livello della catena.
$(".button") .removeClass("open") // .button .addClass("closed") // .button .find(".text") // .button .text .text("Closed") // .button .text .end(); // .button .data("thing"); // GETTER on .button
Forse questo lo spiega meglio. Quando l'insieme di elementi cambia, ho indentato quello della riga e ho notato la modifica nel commento. Poi quando torniamo .end()
indietro di un livello. Funziona indipendentemente da quante volte si modifica la selezione. Tutto finisce quando usi un metodo che restituisce qualcosa di diverso da un insieme di elementi.