3 min de lectura

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()

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.

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.

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.

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.

Nos devuelve
[Subelemento2]

 

Para mas información puedes revisar el sitio de documentación oficial de jQuery

Compartir
Líder técnico en equipos de desarrollo de software. Profesor de Desarrollo Web en la Universidad de Guadalajara. Emprendedora. Fundadora y CTO de CORB.mx. Ponente y tallerista. Colaboradora en proyectos de software libre y Open Source. Comprometida con la comunidad y la industria de la tecnología. Enfocada en el empoderamiento de las mujeres.

24 COMENTARIOS

  1. 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’);)

    • Super que te haya servido.
      Esperamos que siempre encuentres material de ayuda para cualquier tema de web por aca en nuestros posts.

Deja tus comentarios

This site uses Akismet to reduce spam. Learn how your comment data is processed.