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.



Foto de Iñigo Mezo Alvarez

IÑIGO MEZO ALVAREZ (IMAcreste)


Comentarios

Deja una respuesta

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

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 8 reseñas
Iñigo me ha asesorado con un problema que tenía para acceder a mi web y me ha salvado la vida, porque creía que había perdido todo el trabajo que llevaba haciendo años. Muchísimas gracias. Es gratificante encontarte con alguien que controla y te ayuda en los problemas que te pueden surgir.
Santutxu Zaharra
Santutxu Zaharra
11/06/2024
Gran profesional y muy competente, le contratamos para cambiar la web y mejorar el posicionamiento y gracias a su asesoramiento ha mejorado.
jorge martinez
jorge martinez
16/05/2024
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
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