Selectores jquery: Jerárquicos

Home » Blog » Selectores jquery: Jerárquicos

Los selectores jerárquicos de JQUERY sirven para acceder a las notaciones de los hijos, padres, hermanos y descendentes del DOM, tal y como ocurre con HTML y CSS, en donde creamos estilos con la misma jerarquía.

Selectores descendentes

Podemos seleccionar todos los elementos que descienden de un elemento, exactamente igual que ocurre con CSS. $(‘#ejemplo p’) seleccionamos todos los elementos <p> dentro del elemento padre id=ejemplo.

$('#cajon2 p').css({"border":"1px solid red","margin":"40px","text-align":"center"});

<div id="cajon2">
<p class="uno">Texto 1 del cajon 2</p>
<p class="dos">Texto 2 del cajon 2</p>
<p class="tres">Texto 3 del cajon 2</p>
<div id="cajon21">
 <p>Cajon 2.1</p>
 <p>Cajon 2.2</p>
</div>
</div>

Este es un ejemplo muy sencillo para cualquiera persona acostumbrada a CSS. Y lo más importante de este ejemplo es que se acceden a  todos los p dentro del id=cajon2 y id=cajon21, por que el segundo esta dentro del primero.

Selectores de hijos

Este es otro ejemplo muy relacionado con CSS, podemos acceder a todos los elementos hijos directos del elemento padre. $(‘#ejemplo > p’) en este caso selecciona solo los hijos de id=ejemplo.

$('#cajon2 > p').css({"border":"1px solid red","margin":"40px","text-align":"center"});

<div id="cajon2">
<p class="uno">Texto 1 del cajon 2</p>
<p class="dos">Texto 2 del cajon 2</p>
<p class="tres">Texto 3 del cajon 2</p>
<div id="cajon21">
 <p>Cajon 2.1</p>
 <p>Cajon 2.2</p>
</div>
</div>

En este ejemplo podemos ver que solo se seleccionan los p directamente dentro de id=cajon2 y no los del id=cajon21.

Selectores de hermanos

Ahora vamos a obtener los elementos hermanos, o aquellos que están justo después  del elemento especificado. $(‘p#ejemplo~ p’) en este caso selecciona todos los elemento p al mismo nivel o hermanos de id=ejemplo.

$('p.uno ~ p').css({"border":"1px solid red","margin":"40px","text-align":"center"});

<p class="uno">Texto 1 del cajon 2</p>
<p class="dos">Texto 2 del cajon 2</p>
<p class="tres">Texto 3 del cajon 2</p>

En este ejemplo se seleccionan los p hermanos de p.uno.

Seleccionar el siguiente elemento

Vamos a ver como podemos seleccionar el elemento siguiente del elemento identificado. $(‘#ejemplo + p’) en este caso buscamos el primer p que sigue al elemento id=ejemplo.

$('p.uno + p').css({"border":"1px solid red","margin":"40px","text-align":"center"});

<p class="uno">Texto 1 del cajon 2</p>
<p class="dos">Texto 2 del cajon 2</p>
<p class="tres">Texto 3 del cajon 2</p>

Simplemente se pone estilo al siguiente p después de p.uno.

Ejemplo de los 4 selectores JQUERY jerárquicos

<!DOCTYPE html>
<html>
<head>
<title>Selectores jerárquicos</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#miId').click(function(){ 
$('#cajon2 p').css({"border":"1px solid red","margin":"40px","text-align":"center"});
});
$('#miId2').click(function(){ 
$('#cajon2 > p').css({"border":"1px solid red","margin":"40px","text-align":"center"});
});
$('#miId3').click(function(){ 
$('p.uno ~ p').css({"border":"1px solid red","margin":"40px","text-align":"center"});
}); 
$('#miId4').click(function(){ 
$('p.uno + p').css({"border":"1px solid red","margin":"40px","text-align":"center"});
}); 
});
</script>
<style>
*{
width: 100%;
margin: 0 auto; 
} 
#cajon1,#cajon2{
margin-bottom:20px;
}
#cajon21{
margin:20px;
}
</style>
</head>
<body>
<h1 id='miId'>Pinchar para poner borde a TODOS los párrafos (p) del cajon 2</h1> 
<br>
<h1 id='miId2'>Pinchar para poner borde SOLO a los párrafos (p) del cajon 2</h1> 
<br>
<h1 id='miId3'>Pinchar para poner borde SOLO a LOS PARRAFOS DESPUES del primer párrafo (p) del cajon 2</h1> 
<br>
<h1 id='miId4'>Pinchar para poner borde SOLO AL PARRAFO SIGUIENTE del primer párrafo (p) del cajon 2</h1> 
<br>
<div id="cajon1">
<p>Texto 1 del cajon 1</p>
<p>Texto 2 del cajon 1</p>
<p>Texto 3 del cajon 1</p>
</div> 
<div id="cajon2">
<p class="uno">Texto 1 del cajon 2</p>
<p class="dos">Texto 2 del cajon 2</p>
<p class="tres">Texto 3 del cajon 2</p>
<div id="cajon21">
<p>Cajon 2.1</p>
<p>Cajon 2.2</p>
</div>
</div>
<div id="cajon3">
<p>Texto 1 del cajon 3</p>
<p>Texto 2 del cajon 3</p>
<p>Texto 3 del cajon 3</p>
</div>
</body>
</html>

Conclusión

Con estos ejemplos tan sencillos podemos ver el gran potencial que nos ofrece JQUERY para poder acceder a cualquier elemento del DOM.

Las reseñas son opiniones que las personas dejan en la página local de Google. Si son positivas, estas reseñas ayudarán a mejorar la confianza y credibilidad de una marca.

Participa en nuestro sorteo enviando un email con tu nombre y el asunto «Sorteo AUDITORÍA SEO». Se realizara un sorteo cada mes.

Evaluación EXCELENTE
A base de 7 reseñas

Contactamos con Iñigo para el diseño web de nuestra tienda online y estamos encantados. Su asesoramiento, seguimiento y trato han sido excepcionales. Un verdadero crack. Recomendado al 100%. No dudes en ponerte en contacto con el.

erlantz rique
erlantz rique
19/02/2024

Un acierto quien elija a Iñigo. Autentico profesional, se preocupó en todo momento que entendiera el funcionamiento de la web. Me explicó todo las veces necesarias hasta entenderlo. Se preocupó y acertó en que la web tuviera lo que le pedí y lo hizo con creces. Muy contento con el servicio prestado. Una vez realizado el trabajo, cualquier duda que tengo me sigue ayudando. Lo recomiendo sin temor a equivocarme.

Jose Marlasca
Jose Marlasca
06/02/2024

Dió en la clave y nos dió los instrumentos que necesitábamos en esos momentos, y sobre todo entendió a la perfección lo que buscábamos. Lo mejor de web que hemos tenido en 24 años. Eskerrik asko Mezo!!

Troka Abentura
Troka Abentura
07/01/2024

Compromiso, implicación e innovación en los proyectos. Atento a las necesidades e incansable en la búsqueda de soluciones. Muy buena opción.

Jabier Fuertes Udaondo
Jabier Fuertes Udaondo
07/01/2024

Si buscas a alguien que además de hacer un diseño web moderno, responsivo y adaptado a tu sector, te explique por qué plantea el diseño web de esa manera y que te explique y ayude en posicionar tu web lo mejor posible en base a los objetivos fijados, ese es Iñigo Mezo y os lo recomiendo al 100%

Asier Hermoso
Asier Hermoso
03/01/2024

Genial trabajar con él! Además de ser muy buen profesional, experto y responsable, a destacar tanto su implicación en cada proyecto, así como su trato siempre cercano y su paciencia infinita 😉
Un crack!!

itxaso zubia
itxaso zubia
15/12/2023

El plugin gratuito para integrar productos de Prestashop en Wordpress muy sencillo de utilizar y muy bien documentado, os felicito.

Fernando Cózar
Fernando Cózar
02/11/2023

Comentarios

Deja una respuesta