A menudo, ya que tenemos listo nuestro conjunto de elementos envueltos en jQuery, surge la necesidad de aumentar la colección añadiendo un nuevo elemento o de reducir el conjunto dividiéndolo en subconjuntos conformados por los elementos que coincidieron con el selector originalmente. Es por ello que jQuery nos ofrece una nutrida colección de métodos para administrar y gestionar el conjunto de elementos que ya han sido envueltos, y así poder llevar a cabo actividades como la ya mencionada.
Añadir elementos a un conjunto envuelto
En primer lugar, analicemos la metodología para poder añadir elementos a nuestro conjunto envuelto que fue previamente conformado; ya que en las actividades que comúnmente llevamos a cabo al administrar un sitio, es muy probable que nos encontremos en una situación donde requerimos o deseemos agregar más elementos a nuestro conjunto original.
Esta propiedad ofrecida por jQuery, es muy útil al momento de querer añadir más elementos justo después de haber aplicado algún comando al conjunto envuelto original. Hay que recordar que el encadenamiento de jQuery hace que sea posible llevar a cabo una enorme cantidad de trabajo en una sola declaración, por lo que podemos aplicar una función al conjunto original y una vez llevada a cabo, pasar a añadir elementos a dicho conjunto.
Primero examinemos una situación sencilla en la que se presenta el uso de esta propiedad. Supongamos que queremos estructurar una expresión con la cual coincidan todos los elementos de tipo imagen que tienen un atributo “alt” o de título, para ello comúnmente escribiríamos un selector como el siguiente:
jQuery('img[alt],img[title]')
Sin embargo, para ilustrar el funcionamiento del método “add()” que estamos estudiando en este artículo, haremos coincidir con el mismo conjunto de elementos con la siguiente expresión:
jQuery('img[alt]').add('img[title]')
De esta manera, al utilizar el método “add()” nos va a permitir encadenar un grupo de selectores con una relación de tipo “OR”, buscando con esta unión que todos los elementos que se encuentren cumplan con ambos selectores.
La función se estructura de la siguiente manera “add(expresión)”, donde la expresión puede ser un selector, un fragmento de HTML, un elemento de DOM o un conjunto de elementos, mientras que los tipos del parámetro pueden ser una cadena, un elemento o un arreglo. Dicho parámetro se encargará de especificar lo que se va a añadir al conjunto, para que al final la función nos regrese un nuevo conjunto envuelto, ahora con los nuevos elementos agregados, como resultado.
Añadir selectores
Para observar un ejemplo más realista en donde apliquemos el uso de este método, supongamos la siguiente situación, digamos que queremos aplicar un borde grueso a todos los elementos de tipo imagen con el atributo “alt” que tenemos en el sitio, para después proceder a aplicar un nivel de transparencia a todos los elementos “img” que cuenten con atributos “alt” o de título.
El operador coma (,) de los selectores CSS no nos ayudará en esta ocasión, porque queremos aplicar una operación a un conjunto envuelto y luego añadir más elementos al mismo conjunto. Fácilmente podríamos lograr esto con varias instrucciones, pero sería más eficiente y elegante realizar la tarea en una sola instrucción, además de que nos ayudará a ver el poder de jQuery al momento de realizar el encadenamiento.
jQuery('img[alt]').addClass('bordeGrueso').add('img[title]').addClass('transparencia')
Con esta declaración creamos un conjunto envuelto con todos los elementos “img” con atributos “alt”, al cual le aplicamos una clase predefinida con css la cual se encarga de añadir la propiedad del borde grueso a los elementos. Después procedemos a añadir todos las imágenes que contienen el atributo título, para finalmente aplicar otra clase que será la encargada de añadir la transparencia al conjunto recien aumentado, mediante un nivel de opacidad especificado.
Añadir referencias y código HTML
El método “add()” también se puede utilizar para agregar elementos a un conjunto existente, todo esto pasando alguna referencia de los elementos nuevos. Si tuviéramos un elemento al cual podemos hacer referencia mediante el nombre “algunElemento”, se podría añadir al conjunto que formamos con todas las imágenes que contienen la propiedad “alt”, de la siguiente manera:
jQuery('img[alt]').add(algunElemento)
Como si eso no fuera lo suficientemente flexible, el método “add()” no sólo nos permite agregar elementos existentes al conjunto envuelto, si no que también nos permite agregar nuevos elementos pasándole una cadena que contenga código HTML, como la siguiente:
jQuery('p').add('<div>¡Hola Tarola!</div>')
Este fragmento crea un conjunto con todos los elementos de tipo párrafo del documento y después crea un “div” nuevo el cual es finalmente agregado al conjunto ya establecido. Hay que tener en cuenta que en esta declaración unicamente añadimos un nuevo elemento al conjunto envuelto, aún no se ha agregado al DOM, para ello se utiliza el método “append()” que hemos visto en otros artículos pero no ha profundidad.
Conclusión
Como hemos podido observar, el aumento de un conjunto envuelto con la función “add()” es fácil y de gran alcance al momento de aplicación, su uso es variado y según la situación que se nos presente puede ser de gran utilidad. En el siguiente artículo de esta serie, veremos los métodos de jQuery que nos permiten eliminar elementos de un conjunto envuelto.