Já falamos várias vezes sobre pequenos toques na API jQuery que são realmente muito bons. Tudo é bem pensado e refinado. O encadeamento definitivamente se enquadra nessa categoria. Depois de começar a usá-lo e compreendê-lo, parece extremamente natural, como se não houvesse outra maneira.
A ideia principal é usar vários métodos em uma linha em uma única coleção de elementos.
Por exemplo, digamos que depois de clicar em um botão, eu queira alterar uma classe e também alterar algum texto. Mas o botão contém algum HTML.
Open Com jQuery, podemos “encadear” toda a série de ações juntas.
$(".button") .removeClass("open") .addClass("closed") .find(".text") .text("Closed");Isso é possível porque a maioria dos métodos jQuery, enquanto usados como um setter, retornam um conjunto de elementos exatamente como aquele em que o método foi chamado. Às vezes, esse conjunto é exatamente o mesmo, como é o caso com removeClasse addClassaqui, e às vezes esse conjunto é alterado como é o caso aqui com find.
No exemplo com que trabalhamos no vídeo, também falamos sobre .end()qual “recua” um nível da cadeia.
$(".button") .removeClass("open") // .button .addClass("closed") // .button .find(".text") // .button .text .text("Closed") // .button .text .end(); // .button .data("thing"); // GETTER on .buttonTalvez isso explique melhor. Quando o conjunto de elementos muda, eu indentei a linha um e observei a mudança no comentário. Então, quando nós, .end()ele recua um nível. Isso funciona independentemente de quantas vezes você altere a seleção. Tudo termina quando você usa um método que retorna algo diferente de um conjunto de elementos.