¿Cómo utilizar los métodos #parent() y #find() de #jquery? #ejemplos

Este articulo trata sobre los métodos parent() y find() de jquery. Estos métodos son demasiado poderosos cuando se manejan de manera adecuada, ya que se puede navegar por medio de todo el contenido HTML de un sitio, y a su vez, realizar modificaciones dinámicas, o obtener algún elemento o un conjunto de estos para realizar alguna animación o calculo.

Para ver su funcionamiento utilizaremos el siguiente código HTML que describe un div padre con muchos hijos dentro los cuales llame de acuerdo a un árbol genealógico (padre, hijo, nieto, bisnieto).

<div id="divPadre">
   <div id="divHijoPrimero">
      <div id="divNietoPrimero">
         <div id="divBisnieto"></div>
      </div>
   </div>
   <div id="divHijoSegundo">
      <div id="divNietoSegundo"></div>
   </div>
</div>

Comenzaremos por seleccionar el div bisnieto con el siguiente selector:

obj=$("#divBisnieto");

Esto nos dará el objeto divBisnieto, pero supongamos que quisiéramos obtener el div padre (osea el div que contiene a los demás), para ello utilizaremos el método parent() de jquery de la siguiente manera:

//tres veces parent nos sacaría hasta el div padre, el cual contiene a los demás divs
obj=$("#divBisnieto").parent().parent().parent();

Como podemos observar cada que utilizamos el método parent() lo que hacemos es dirigirnos al padre inmediato del objeto HTML que tenemos en el selector.

Ahora supongamos que teniendo el divBisnieto seleccionado queramos seleccionar un elemento fuera del padre inmediato de divBisnieto, por ejemplo el div con id divNietoSegundo, para ello utilizaremos el método find() el cual al contrario de parent() nos permite realizar una selección sobre los elementos dentro de un objeto ya seleccionado anteriormente, y lo hacemos de la siguiente manera:

//tres veces parent nos sacaría hasta el div padre, el cual contiene a los demás divs
obj=$("#divBisnieto").parent().parent().parent();

//y ya teniendo en la variable obj el padre de todos los divs utilizamos find
objDivNietoSegundo=obj.find("#divNietoSegundo")

Recuerden que pueden utilizar el método find() de igual manera que los selectores comunes $() con la diferencia que solo abarcara los elementos hijos del selector ya utilizado.

Espero les sirva este rápido tutorial y utilicen estos métodos ya que pueden hacer cosas muy interesantes.