Cómo obtener padres e hijos en jQuery
Podemos navegador por el DOM y encontrar a los padres, hijos y hermanos de cualquier nodo con los métodos:
- parent()
- children()
- parents()
- find()
- siblings()
Veamos con ejemplos cada uno de ellos.
Obtener elementos Padres en jQuery
El padre de un elemento es aquel que se encuentra por encima y que le engloba.
Se utiliza el método parent()
|
1 2 3 4 5 6 7 8 9 10 |
<div> <p>Elemento1</p> <p>Elemento2</p> <p>Elemento3</p> <span class="hijo">Otro</span> <p>Elemento4</p> </div> //Obtener el padre del span con la clase hijo $('span.hijo').parent(); |
Y eso nos devolvería al div.
Obtener elementos Hijos directos en jQuery
Los hijos son todos los elementos que estan por debajo de otro en el DOM, en otras palabras, todo lo que hay dentro de una etiqueta.
Se utiliza el método children() y se puede filtrar por el tipo de elemento hijo que se desea.
|
1 2 3 4 5 6 7 8 9 10 |
<div class="emphasis"> <p>Elemento1</p> <p>Elemento2</p> <p>Elemento3</p> <span>Otro</span> <p>Elemento4</p> </div> //Obtener los hijos directos "p" del div con la clase emphasis $('div.emphasis').children('p'); |
Esto nos devolverá:
[Elemento1, Elemento2, Elemento3, Elemento4]
Obtener elementos Padres, abuelos, bisabuelos, tatarabuelos… en jQuery
Podemos obtener a todos los padres que cumplan con una característica.
Se utiliza el método parents() y se puede filtrar por el tipo de elemento superior que se desea.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ul class="menu"> <li>Elemento1</li> <li>Elemento2</li> <li> <ul class="submenu"> <li id="sub1">Subelemento1</li> <li>Subelemento2</li> </ul> </li> </ul> //Obtener los "padres" del elemento sub1 que sean elementos ul $('li#sub1').parents('ul'); |
Nos devolverá:
[ul.submenu, ul.menu]
Obtener elementos Hijos, nietos, bisnietos, tataranietos… en jQuery
Podemos obtener los elementos por debajo (hijos) sin importar si no son hijos directos.
Se utiliza el método find() y se puede filtrar por el tipo de elemento inferior que se desea.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div> <p>Elemento1</p> <p>Elemento2</p> <p> Elemento3 <p>Párrafo dentro de otro</p> </p> <span>Otro</span> <p>Elemento4</p> </div> //Obtener los hijos directos "p" del div con la clase emphasis $('div.emphasis').find('p'); |
Esto nos devolverá:
[Elemento1, Elemento2, Elemento3, Párrafo dentro de otro, Elemento4]
Obtener elementos Hermanos en jQuery
Son los elementos que se encuentran al mismo nivel.
Se utiliza el método siblings() y se puede filtrar por el tipo de elemento hermano que se desea.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ul> <li>Elemento1</li> <li>Elemento2</li> <li> <ul> <li id="sub1">Subelemento1</li> <li>Subelemento2</li> </ul> </li> </ul> //Obtener los "hermanos" del elemento sub1 $('li#sub1').siblings('li'); |
Nos devuelve
[Subelemento2]
Para mas información puedes revisar el sitio de documentación oficial de jQuery
Te lo agradezco muchísimo, básicamente siempre que uso JQuery recurro a este post.
Deberías incluir la función .closest. Ella busca hacia arriba, es muy útil para subir y desde ahí buscar hacia abajo: $(this).closest(‘form’).find(‘.entrada_cod’)
You should include the .closest function. She looks up, is very useful to upload and from there look down: $ (this) .closest (‘form’). Find (‘. Input_cod’)
Muy bueno, gracias me ayudo mucho. 🙂
Me resolvió un re problema que debía resolver, muchisimas gracias por el post.
Super que te haya servido.
Esperamos que siempre encuentres material de ayuda para cualquier tema de web por aca en nuestros posts.
Hola buenos dias muy bueno tu post. Me gustaría preguntarte algo. Como podría acceder a un determinado hijo si no tiene Id?
Muy bueno y entendible, gracias!
Muchas gracias por la información
Grandeeeee…
cuanto costaria un curso desde cero hasta super avanzado de javascript
Alfonso Caballero liked this on Facebook.
Days Toby liked this on Facebook.
Le Soxx liked this on Facebook.
Gracias, aún no me aprendo del todo bien las funciones de cada uno, y siempre vengo a tu página a recordarlo xDDD muy buenos tus aportes.
Hola, y que pasa si quiero obtener todos los nodos hijos sin importar de que etiqueta sea, digamos que dentro de ese div tengo esto algo, otro, y quiero obtener todos los elementos sin especificar la etiqueta ($(‘div.emphasis’).children(‘p’);)
Buen post, me ilustro muchísimo, yo que soy principiante en estos temas de jquery.
Rayos y yo haciendo todo eso con javascript puro xD
muy practico, gracias!
Me da gusto que te agraden los contenidos. Puedes seguirnos en la página de facebook Michelle Torres y también en twitter @nmicht
Alfonso Caballero liked this on Facebook.
me encanta que haya creado esta página maestra. Es bastante util
jeje está chévere 🙂
Un gusto que te agraden los contenidos.
Bonito día!
Igual para ti 🙂
Days Toby liked this on Facebook.
Mishell Sossa liked this on Facebook.