Hemos hablado varias veces sobre pequeños toques en la API de jQuery que son realmente agradables. Todo está bien considerado y refinado. El encadenamiento definitivamente cae en esa categoría. Una vez que comienzas a usarlo y lo entiendes, se siente extremadamente natural, como si no hubiera otra forma.
La idea principal es que utilice varios métodos seguidos en una única colección de elementos.
Por ejemplo, digamos que después de hacer clic en un botón, quiero cambiar una clase y también cambiar algún texto. Pero el botón tiene algo de HTML adentro.
Open Con jQuery, podemos "encadenar" toda la serie de acciones juntas.
$(".button") .removeClass("open") .addClass("closed") .find(".text") .text("Closed");Esto es posible porque la mayoría de los métodos de jQuery, aunque se usan como setter, devuelven un conjunto de elementos como el que se llamó al método. A veces, ese conjunto es exactamente el mismo, como es el caso de removeClassy addClassaquí, y otras veces ese conjunto se modifica como es el caso de aquí find.
En el ejemplo con el que trabajamos en el video, también hablamos sobre .end()qué "retrocede" un nivel en la cadena.
$(".button") .removeClass("open") // .button .addClass("closed") // .button .find(".text") // .button .text .text("Closed") // .button .text .end(); // .button .data("thing"); // GETTER on .buttonQuizás eso lo explique mejor. Cuando cambia el conjunto de elementos, sangré la línea uno y noté el cambio en el comentario. Luego, cuando .end()retrocede un nivel. Esto funciona sin importar cuántas veces cambie la selección. Todo termina cuando usas un método que devuelve algo más que un conjunto de elementos.