Trabajando con elementos en jQuery: Subconjuntos con relaciones

En este artículo estudiaremos como crear subconjuntos en base a relaciones jerárquicas, analizaremos las distintas funciones que existen para establecer estas relaciones con jQuery.

Como ya hemos podido comprender, la librería jQuery nos permite obtener nuevos conjuntos de elementos envueltos a partir de un conjunto ya existente, estos llamados subconjuntos se pueden obtener de distintas maneras dependiendo de las herramientas y factores que tengamos a nuestra disposición en el documento que estructura nuestro sitio.

En el artículo anterio, donde hablábamos de la obtenición de subconjuntos, mencionamos y estudiamos la manera de crear dichos subconjuntos mediante la posición de los elementos en el conjunto padre, en esta ocasión utilizarmos las relaciones jerárquicas que se establecen entre los elementos envueltos y el resto de los elementos que conforman el DOM de nuestro HTML para obtener el subconjunto; para ello utilizaremos una serie de funciones bastante particulares que pueden resultar diferentes en principio.

Métodos de relación en jQuery

Debemos tener en cuenta que estos métodos funcionan de una manera ligeramente distinta a la mayoría de los métodos que hemos visto en las dos partes que ha abarcado nuestro curso hasta el momento, al igual que el método “slice()”, los métodos que veremos en este artículo devuelven un nuevo conjunto envuelto, dejando el conjunto original sin cambio alguno.

Cada uno de estos métodos acepta una expresión de selección como parámetro, el cual es opcional, y que al mandarlo nos permite obtener con ello todos los elementos que coincidan con dicha selección, en cambio si se opta por no mandar alguna expresión como parámetro del método, entonces todos los elementos elegibles con seleccionados. Puede que este no se ordene muy bien en nuestra cabeza al momento de leerse por primera vez, es por ello que pasaremos a explicarlo mejor de manera detallada, paso a paso y describiendo cada uno de los métodos.

Estos métodos nos dan un amplio margen de libertad para seleccionar elementos del DOM, en base a relaciones con los otros elementos DOM. En la siguiente lista vamos a ver cómo se ocupa jQuery del manejo y creación de esta clase de conjuntos envueltos.

• children() – Devuelve un conjunto estructurado con todos los hijos únicos de los elementos envueltos.
• contents() – Regresa un nuevo conjunto compuesto por el contenido de los elementos envueltos, frecuentemente se usa para obtener el contenido de elementos de tipo iframe.
• next() – Nos trae un nuevo conjunto que contiene el siguiente elemento contiguo al conjunto envuelto.
• nextAll() – Forma un nuevo conjunto que contiene todos los elementos que se encuentran contiguos posteriormente a los elementos envueltos en el conjunto original.
• parent() – Devuelve un conjunto con todos los padres directos de los elementos del conjunto original.
• parents() – Regresa un conjunto con todos los ancestros únicos de los elementos del conjunto original, esto incluye a los padres directos y a todos los elementos que fueron heredados antes, sin incluir a la raíz del documento.
• prev() – Nos trae un nuevo conjunto que contiene el anterior elemento contiguo al conjunto envuelto.
• prevAll() – Forma un nuevo conjunto que contiene todos los elementos que se encuentran antes que los elementos envueltos en el conjunto original.
• siblings() – Regresa un conjunto conformado por todos los elementos hermanos de los elementos que conforman el conjunto original.

Pongamos en práctica algunos de estos métodos, supongamos que tenemos una lista con cinco elementos, de esos cinco tenemos un sólo elemento que tiene la clase “.noAzul” y queremos agregar un estilo CSS al resto de los elementos de la lista que están contiguos a dicho elemento, para que se vean de color azul y que esto no afecte al resto del DOM.

Primero definimos nuestra lista:

<ul>
    <li>Uno</li>
    <li>Dos</li>
    <li class="noAzul">Tres</li>
    <li>Cuatro</li>
    <li>Cinco</li>
</ul>

Como queremos cambiar el estilo a todos los elementos hermanos, entonces debemos utilizar el método “siblings()” que nos devolverá un nuevo subconjunto con todos los elementos contiguos, y para aplicar el estilo escribimos el siguiente código:

jQuery(".noAzul").siblings().css("background-color", "blue");

Lo que hicimos básicamente es crear el conjunto envuelto con los elementos que contengan la clase “noAzul”, después con la aplicación del método “siblings()” obtenemos el subconjunto deseado, al cual terminamos por aplicarle el estilo CSS cambiando su propiedad background-color a azul, de esta manera cuando veamos nuestra lista todos los elementos lucirán con un fondo azul, obviamente exceptuando el elemento número tres.

De manera similar podemos aplicar el resto de las funciones de la lista, si quisiéramos aplicar el estilo únicamente al elemento posterior utilizaríamos “next()” o si es necesario aplicarlo a todos los ancestros utilizaríamos “parents()”, la metodología es sencilla una vez comprendiéndola.

Conclusión

Hemos llegado a un punto donde sabemos crear, refinar y cortar conjuntos envueltos con fines de especificación, en estos dos temas hemos logrado manejar subconjuntos de dos manera distintas, sencillas pero muy eficientes, en el siguiente artículo analizaremos algunos otros métodos para esta misma función.