Trabajando con elementos en jQuery: Encadenamiento

Hasta el momento hemos logrado avanzar considerablemente en el terreno del manejo de elementos, es por ello que tenemos conciencia de la capacidad y potencial que se produce al manejar métodos para envoltura de elementos de manera encadenada. La habilidad de utilizar dichos métodos en cadena nos permite realizar una gran cantidad de actividades en una sola sentencia, ahorrando líneas y redundancia de lógica en nuestro código.

Esta capacidad de encadenamiento no sólo nos facilita escribir y realizar de manera concisa operaciones poderosas que llegan a tener gran alcance, sino que también nos concede una mejora en la eficiencia, porque los conjuntos envueltos no tienen que ser recalculados cada vez que deseemos aplicar múltiples comandos o realizar operaciones sobre ellos.

Encadenamiento en jQuery

La utilización del encadenamiento puede desembocar en la producción de muchas facilidades, dependiendo de los métodos utilizados en una cadena de mando, varios conjuntos envueltos se pueden generar o podemos aplicar operaciones sobre lo que acabamos de afinar. Por ejemplo, utilizando el método “clone()” (que vamos a estudiar a detalle en artículos posteriores) generamos un nuevo conjunto envuelto, lo que crea copias de los elementos en el primer conjunto, si aplicamos dicha función en una cadena podemos generar nuevos conjuntos, pero si no tenemos manera de hacer referencia al conjunto original, nuestra capacidad para construir cadenas de comando versátiles con jQuery se vería disminuida. Considere la siguiente declaración:

jQuery('img').clone().appendTo('#divPrincipal');

Con esta sentencia estamos generando dos conjuntos envueltos, el original que esta compuesto por todos los elementos de tipo imagen que se encuentran en una página, mientras que el segundo conjunto generado se encuentra conformado por todas las copias de los elementos originales. El método “clone()” devuelve este segundo grupo como resultado de sus operaciones, para que finalmente nosotros nos encarguemos de añadirlo al DOM mediante el método “appendTo” que se encuentra encadenado.

Esta metodología nos permite seguir agregando funciones a la cadena si así lo deseáramos, si posteriormente quisiéramos aplicar otro comando bastaría con añadir un punto (.) al final de la cadena y especificar la nueva función que deseemos. Esta resultaría ser la sintaxis común, pero al manejar métodos de generación de nuevos conjuntos se pueden presentar ciertos casos en los que deseemos aplicar operaciones únicamente al conjunto original y no a los nuevos.

Por ejemplo, si quisiéramos agregar un nombre de clase al conjunto envuelto original después de ser clonado, en teoría resultaría bastante fácil y bastaría con agregar el punto y la nueva función, sin embargo, si hacemos esto la clase se agregaría al conjunto clonado. Para evitar esto existen otras maneras de filtrar el encadenamiento.

Método end()

La librería jQuery provee para esta clase de necesidades, funciones como el comando “end()” que se utiliza dentro de una cadena para crear una copia de seguridad de un conjunto envuelto anterior y retornar su valor para que las operaciones posteriores se apliquen únicamente a ese conjunto. Si consideramos el ejemplo de agregar una clase que mencionamos en el párrafo anterior, tendríamos que la sentencia de nuestro código en jQuery quedaría de la siguiente manera:

jQuery('img').clone().appendTo('#divPrincipal').end().addClass('fuiClonada')

El método “appendTo()” realizará operaciones con el nuevo conjunto clonado, pero al llamar el método “end()” regresaremos a trabajar con el conjunto previo, es decir con las imágenes originales que fueron guardadas al envolver los elementos con la función “jQuery()”. A dicho conjunto original, será al que le aplicaremos el comando “addClass()”, que se encarga de añadir la clase “fuiClonada” a los elementos.

Sin la intervención del método “end()”, la adherencia de la clase se hubiera efectuado sobre los clones. Este método siempre se debe utilizar dentro de una cadena de mando de jQuery, su función es crear la copia de seguridad del conjunto devuelto anteriormente, no recibe parámetros y como se puede deducir únicamente devuelve el conjunto envuelto anterior.

Si pensamos que los conjuntos envueltos que se generan en la cadena de comandos de jQuery son guardados en una pila, cuando el método “end()” es llamado, el conjunto envuelto más reciente es el que se extrae de la pila, dejando el anterior expuesto apra que los siguientes comandos puedan funcionar sobre él.

Método andSelf()

Otro método de jQuery que realiza una práctica similar, y modifica la pila conformada por los conjuntos envueltos es la función “andSelf()”, que combina los dos conjuntos de nivel superior de la pila, en un solo conjunto envuelto.

Al igual que en el método “end()”, esta función no recibe parámetros, ya que únicamente se encargada de fusionar conjuntos y nos entrega el conjunto combinado resultante.