Jquery

Como obtener padres hijos hermanos en jquery

Por : Jhons_1101
2016-05-18
Tags :
Cuando navegamos por el DOM, tenemos que habernos topado con la necesidad de obtener algún descendiente de un elemento o conseguir su padre, o algún pariente del elemento es cuestión.
Tan sencillo como saber manejar los métodos que Jquery pone a nuestra disposición para cada caso.
Veamos algunos ejemplos.
  • Padres : (parent)
  • Todos los padres, abuelos, bisabuelos, tatarabuelos… (parents)
  • Hijos directos : (children)
  • Todos los hijos, nietos, bisnietos, tataranietos… (find)
  • Hermanos (siblings)

  • Analicemos un poco más a detalle cada uno de estos, su estructura y su método de emplearse.

    compartir en facebook compartir en Google compartir en Twitter compartir en Blogger compartir como código embebido compartir la url

  • Padres
  • 
    
    <ul>
        <li>Home</li>
        <li>Misión</li>
        <li>Visión</li>
        <li class="hijo">Mapa del sitio</li>
        <li>Contacto</li>
    </ul>
    <script>
    //Obtenemos el papá directo del elemento mediante el método "parent"
    var padre = $('.hijo').parent();
    console.log(padre); // retorna: 'ul', porque es el padre directo
    </script>
    
    

  • Todos los padres, abuelos, bisabuelos, tatarabuelos… (parents)
  • 
    
    <ul>
        <li>Home</li>
        <li>Misión</li>
        <li>Visión</li>
        <li class="hijo">Sedes
            <ul>
                <li>Norte</li>
                <li>Este</li>
                <li>Oeste</li>
                <li>Sur</li>
            </ul>
        </li>
        <li>Contacto</li>
    </ul>
    <script>
    //Obtenemos todos papás del elemento del seleccionado
    var TodosPapas = $('ul').parents();
    console.log(TodosPapas); // retorna: 'ul', 'body, 'html', ya que son todos los padres por encima del "ul"
    </script>
    
    

  • Hijos directos : (children)
  • 
    
    <ul>
        <li>Home</li>
        <li>Misión</li>
        <li>Visión</li>
        <li class="hijo">Sedes
            <ul>
                <li>Norte</li>
                <li>Este</li>
                <li>Oeste</li>
                <li>Sur</li>
            </ul>
        </li>
        <li>Contacto</li>
    </ul>
    <script>
    //Obtenemos todos los hijos directos del elemento seleccionado.
    var hijodirecto = $('.hijo').children();
    console.log(hijodirecto); // retorna: 'ul', ya que es el hijo directo, no tiene mas.!
    </script>
    
    

  • Todos los hijos, nietos, bisnietos, tataranietos… (find)
  • 
    
    <ul>
        <li>Home</li>
        <li>Misión</li>
        <li>Visión</li>
        <li class="hijo">Sedes
            <ul>
                <li>Norte</li>
                <li>Este</li>
                <li>Oeste</li>
                <li>Sur</li>
            </ul>
        </li>
        <li>Contacto</li>
    </ul>
    <script>
    //Obtenemos el listado de hijos del elemento seleccionado
    var todosHijos = $('.hijo').find('*');
    console.log(todosHijos); // retorna: 'ul','li','p' ya que son hijos de elementos hijos. osea, nietos ....
    </script>
    
    

  • Hermanos (siblings)
  • 
    
    <ul>
        <li class="li_inicio">Home</li>
        <li>Misión</li>
        <li>Visión</li>
        <li class="hijo">Sedes
            <ul>
                <li>Norte</li>
                <li>Este</li>
                <li>Oeste</li>
                <li>Sur</li>
            </ul>
        </li>
        <p>Contacto</p>
    </ul>
    <script>
    //Obtenemos los hermanos del elemento li.li_inicio
    var hermanos = $('.li_inicio').siblings('*');
    console.log(hermanos); // retorna: 'li', ya que todos estos son hermanos de 'li.li_inicio', 
    // estan en la misma escala del DOM, incluido 'li.hijo'
    </script>
    
    

    Para mayor informacion puedes entrar documentación JQuery Oficial para aclarar dudas y mas ejemplos.



  • No olvides revisar la sección de Pantallazos para que veas el Ejemplo.




  • Si este contenido te fue útil, no olvides compartirlo en redes sociales, Considéralo. Puede ser la manera de agradecer!


    Agrega tu comentario...

    Puedes utilizar etiquetas <pre></pre>, <p></p>, <div></div>, + (Nombre usuario, para responderle a alguien)

    UGbOHYT





    gustavo-portilla
    2017-10-28 03:17:06
    muchas gracias, era lo que estaba buscando
    st3v3n1101
    2016-06-02 16:53:07
    muchas gracias
    Esta entrada no cuenta con imágenes adjuntas

    Unete al grupo de whatsApp +57 316 392 6456

    Sigue el grupo en facebook

    Siguenos.....