Nous avons parlé à plusieurs reprises de petites touches dans l'API jQuery qui sont vraiment très sympas. Tout est bien pensé et raffiné. Le chaînage entre définitivement dans cette catégorie. Une fois que vous commencez à l'utiliser et que vous l'avez compris, cela semble extrêmement naturel, comme il ne devrait y avoir aucun autre moyen.
L'idée principale est d'utiliser plusieurs méthodes à la suite sur une seule collection d'éléments.
Par exemple, disons qu'après avoir cliqué sur un bouton, je veux changer une classe ainsi que changer du texte. Mais le bouton contient du HTML.
Open
Avec jQuery, nous pouvons «enchaîner» toute la série d'actions ensemble.
$(".button") .removeClass("open") .addClass("closed") .find(".text") .text("Closed");
Cela est possible car la plupart des méthodes de jQuery, lorsqu'elles sont utilisées comme setter, renvoient un ensemble d'éléments exactement comme celui sur lequel la méthode a été appelée. Parfois, cet ensemble est exactement le même, comme c'est le cas avec removeClass
et addClass
ici, et parfois cet ensemble est modifié comme c'est le cas ici avec find
.
Dans l'exemple avec lequel nous avons travaillé dans la vidéo, nous avons également parlé du .end()
«recul» d'un niveau de la chaîne.
$(".button") .removeClass("open") // .button .addClass("closed") // .button .find(".text") // .button .text .text("Closed") // .button .text .end(); // .button .data("thing"); // GETTER on .button
Cela explique peut-être mieux cela. Lorsque l'ensemble des éléments change, j'ai mis en retrait la première ligne et noté le changement dans le commentaire. Puis, quand on .end()
recule d'un niveau. Cela fonctionne quel que soit le nombre de fois que vous modifiez la sélection. Tout se termine lorsque vous utilisez une méthode qui renvoie autre chose qu'un ensemble d'éléments.