Envolver elementos con jQuery

En este artículo explicamos como envolver un conjunto de elementos y alterar el contenido de una estructura mediante las funciones "wrap()", "wrapAll()" y "wrapInner()" de jQuery

Un tipo de manipulación del DOM que a menudo se tiene que realizar, es el envolver un elemento o una serie de estos en un enmarcado. Esta función es recurrida si existe la necesidad de agrupar a cierta escala los elementos de un mismo tipo o que coinciden en un factor.

Por ejemplo, podríamos querer envolver dentro de un elemento de capa “div”, todos los elementos de tipo vínculo (links) que cuentan con una determinada clase. Para poder lograr tales modificaciones DOM recurrimos al uso de la función “wrap()” de jQuery, cuya sintaxis es bastante sencilla.

Función wrap en jQuery

El comando “wrap” de jQuery se encarga de ajustar todos los elementos del conjunto obtenido mediante el selector, dentro del elemento proporcionado mediante un parámetro. El parámetro puede ser una cadena o un elemento directamente, este se encargará de proporcionar las etiquetas de apertura y cierre del elemento donde se va a envolver cada elemento del conjunto combinado, o un elemento a ser clonado que servirá como el envoltorio.

Para nuestro ejemplo de los elementos de tipo vínculo, primero necesitamos envolver cada enlace que pertenece a la clase “X”, para que finalmente mediante el comando “wrap()” podamos añadirlos al elemento de tipo capa que es proporcionado como parámetro, lo cual nos da una sentencia como la siguiente:

 
jQuery("a.x").wrap("<div class='y'></div>");

En cambio, si hubiéramos querido envolver el enlace en un clon del primer elemento “div”, entonces esta hubiera sido la sintaxis correcta:

jQuery("a.x").wrap(jQuery("div:first")[0]);

Función wrapAll de jQuery

En jQuery, cuando varios elementos se recogen en un conjunto combinado, el método “wrap()” de jQuery opera en cada uno de ellos individualmente. Si se prefiere envolver todos los elementos en el conjunto como una unidad, podemos usar el comando “wrapAll()” en su lugar.

Este comando se encarga de ajustar los elementos del conjunto combinado, como una unidad. Al igual que en el comando “wrap()”, el parámetro proporcionado puede ser una cadena o un elemento los cuales van a representar las etiquetas o el clon del elemento.

La función actúa de la siguiente manera, si proporcionamos una estructura HTML como esta:

<div class="contenedor">
  <div class="interno">1</div>
  <div class="interno">2</div>
</div>

Y utilizamos el código de jQuery en la siguiente manera:

jQuery('.interno').wrapAll('<div class="nuevaClase" />');

Obtendremos como resultado final la siguiente estructura:

<div class="contenedor">
  <div class="nuevaClase">
     <div class="interno">1</div>
     <div class="interno">2</div>
  </div>
</div>

Función wrapInner en jQuery

Existen ocasiones en que lo que desea es envolver el contenido y no los elementos, para esos casos existe el método “wrapInner()”, este comando se encarga de envolver el contenido, para incluirlo como nodos de texto. Al igual que en los métodos anteriores el parámetro puede ser un elemento o una cadena la cual representará las etiquetas o el elemento clonado donde se envolverá el contenido.

Si tomamos la estructura del ejemplo anterior y aplicamos el método de la siguiente manera:

jQuery('.interno').wrapInner('<div class="nuevaClase" />');

Obtendremos una nueva estructura como la siguiente:

<div class="contenedor">
  <div class="interno">
     <div class="nuevaClase">1</div>
  </div>
  <div class="interno">
     <div class="nuevaClase">2</div>
  </div>
</div>

Conclusión

Con estos tres métodos hemos logrado aprender las propiedades de envolvimiento de elementos, con los artículos anteriores complementamos las funciones de creación, copia y movimientos de elementos, aún falta ver como desaparecer y eliminar dichos elementos y para ello en los artículos que siguen de este manual estudiaremos las funciones “remove()” y “replaceWith()”.