# 15: concatenamento - Trucchi CSS

Anonim

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 removeClasse addClassqui, 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.