Si ya hemos revisado los selectores básicos, podemos comenzar con el siguiente bloque: Selectores por jerarquía (.
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!
Muchas gracias, muy buen par de post. Muy simples y claros.
Saludos
Muchas gracias Arturo 😀
Espero seguir avanzando con JQuery para mostrar lo fácil que es trabajar con esta gran librería 🙂
¡Saludos!