¿Cómo funciona la función closest() de jquery? #ejemplos #jquery

La función closest de jquery, sirve para seleccionar un padre de un elemento que coincida con el selector dado.
A diferencia de parent() (ver como funciona parent()), esta función nos permite ir hasta el nivel deseado ya sea por una clase, id o el nombre de la etiqueta.

Su funcionalidad es parecida a find() (ver cómo funciona find()) solo que funciona en sentido inverso, yendo a los padres en lugar de a los hijos.

Esta función solo nos seleccionara el primer elemento encontrado con el selector dado.
A continuación muestro un ejemplo de como funciona closest():

Código HTML

<div class="abuelo">
  <div>
    <input id="hijo1" type="text" value="Soy el hijo 1" />

    <input id="hijo2" type="text" value="Soy el hijo 2" />
  </div>
</div>

Código Jquery

$(document).ready(function(){
		//asi seleccionamos el hijo1
		hijo1=$("#hijo1");

		//de esta manera podemos seleccionar a padre por medio de closest()
		padre=hijo1.closest("div");

		//mostramos el contenido html para confirmar que seleccionamos el div padre
		alert(padre.html())

		//asi seleccionamos al abuelo mediante su clase
		abuelo=hijo1.closest(".abuelo")

		//mostramos html del abuelo
		alert(abuelo.html())
	})