Los selectores jerárquicos en JQuery

Si ya hemos revisado los selectores básicos, podemos comenzar con el siguiente bloque: Selectores por jerarquía (Hierarchy selectors). En este grupo podemos obtener aquellos elementos que dependen de otros en la estructura de nuestra página. Por ejemplo, podemos recuperar los radiobuttons dentro de un formulario específico, imágenes dentro de una referencia sin indicar uno en concreto… Quizás puede interesarnos acceder a estos atributos para cambiar su estilo o darle una nueva funcionalidad de una manera indirecta. Las formas de acceso serían:

  • Antecesor y descendiente: Indicando cuál es el antecesor a través del tipo de elemento, podemos acceder a unos descendientes en concreto y darles así un valor añadido. La forma de acceder a ellos sería $(“antecesor descendiente”).

Ejemplo: Tenemos un body con un formulario que contiene dos divs y , a su vez, cada uno contiene una referencia.

<body>
<form id="form1" runat="server">
<div>
<a href="">Este es el primer enlace dentro de un div</a>
</div>
<div>
<a href="">Este es el segundo enlace dentro de un div</a>
</div>
</form>
</body>

Queremos que todos aquellos elementos de tipo referencia (descendientes) dentro de un div (antecesor) tengan un fondo azul.

$("div a").css("backgroundColor", "blue");

  • Parent > Child: En este caso, se pondrá el id del padre en primer lugar  y el tipo de los hijos del mismo separados por un mayor que. La diferencia con el anterior es que, en este caso, podemos indicar como primer valor el id de un elemento y los hijos son escogidos por el tipo. La manera de recuperarlos es $(“#parent > child”).

Ejemplo: Tenemos dos divs en el cuerpo de la página y deseamos que aquel llamado “padre” tenga el color de las letras de sus referencias de color rojo.

<body>
<form id="form1" runat="server">
<div id="padre">
Soy el div padre <span>Soy un span</span>
<label>
Esto es una label</label>
<a href="">Texto del enlace</a>
<div>
Texto escrito dentro del div <a href="">Texto del enlace</a>
<input value="Un boton" type="button" />
</div>
</div>
<span>Soy un span</span>
<label>
Esto es una label</label>
<div>
Soy un div
</div>
</form>
</body>

Escribiendo el siguiente selector, únicamente estaríamos pintando el texto del enlace que tiene como hijo el div padre, pero no aquel que está colocando dentro del segundo div que contiene el mismo.

$("#padre > a").css("color", "red");

  • Prev + next: Para complicarlo un poco más, podemos estar buscando todos los botones que tienen previamente una label. Esto se consigue especificando en un primer lugar qué necesitamos tener por delante de los elementos que estamos buscando en el siguiente selector: $(“prev + next”).

Ejemplo:

<body>
<form id="form1" runat="server">
<div id="padre">
<div>
Texto escrito dentro del div <a href="">Texto del enlace</a>
<input value="Input sin label" type="button" />
</div>
</div>
<div>
<div>
<label>
Label antes que un input</label>
<input value="Input despues de una label" type="button" />
</div>
</div>
</form>
</body>

El objetivo en este caso, sería poder mostrar el borde del botón de color rojo, pero solamente del segundo que es el único que cumple las condiciones establecidas.

$("label + input").css("borderColor", "red");

  • Prev ~ siblings: Por último, tenemos la posibilidad de seleccionar los elementos por tipo, considerados hermanos, de otro anterior indicado por id. La diferencia que tiene, respecto a parent > child es que este selector localiza el primer elemento especificado por  el id y, a partir de ese momento, todos los elementos del tipo indicado y  además  que estén a su mismo nivel se verán afectados por el cambio introducido. El selector sería el siguiente: $(“prev  ~ siblings”).

Ejemplo:

<body>
<form id="form1" runat="server">
<div id="padre">
Soy el div padre
<div>
Texto escrito dentro del div <a href="">Texto del enlace</a>
<input value="Un boton" type="button" />
</div>
</div>
<span>Soy un span</span>
<label>
Esto es una label</label>
<div>
Soy un div
</div>
</form>
</body>

Tomando como precedente el div con id padre quiero que los próximos elementos de tipo div tengan un borde de 5px y de color amarillo.

$("#padre ~ div").css("border", "5px solid yellow");

¡Saludos!

2 comentarios en “Los selectores jerárquicos en JQuery”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *