Hoy vengo a hablaros de un método de jQuery que descubrí relativamente hace poco tiempo, se trata del método closest(). Con este método podemos buscar el primer elemento padre en el DOM con el selector indicado sin tener que recurrir a la conocida función parent() con la que podríamos ir subiendo elemento a elemento hasta encontrar el deseado.

A continuación os pongo un ejemplo para que sea más fácil de entender.

<div id="bloque1" class="bloque">
	<div id="elemento1">
		<span>Texto 1</span>
		<input type="button" id="boton1" value="Ocultar Bloque" 
		onclick="OcultarBloque(jQuery(this))">
	</div>
</div>
<div id="bloque2" class="bloque">
	<div id="elemento2">
		<span>Texto 2</span>
		<input type="button" id="boton2" value="Ocultar Bloque" 
		onclick="OcultarBloque(jQuery(this))">
	</div>
</div>

Supongamos que tenemos este código HTML y queremos dar funcionalidad a los botones que hay para que al pulsarlos oculten el bloque en el que se encuentra. Para ello le hemos asignado un evento onClick de jQuery pasándole una referencia al propio botón con jQuery(this).

La principal ventaja de usar closest() respecto a parent(), reside en que si cambiamos la maquetación de nuestra página y añadimos algún elemento intermedio podríamos encontrar el elemento igualmente, mientras con parent() dejaría de funcionar, ya que no estaríamos encontrando el elemento deseado.

Ahora vamos a ver el código de nuestro método OcultarBloque() usando parent()

function OcultarBloque(boton){
	jQuery(boton).parent().parent().hide();
}

Ahora vamos a ver el código de nuestro método OcultarBloque() usando closest()

function OcultarBloque(boton){
	jQuery(boton).closest('.bloque').hide();
}

Con esta sencilla línea, le estamos diciendo que nuestro botón, una vez pulsado busque el elemento padre del botón que tenga la clase de CSS bloque y lo oculte.

Espero que te haya servido de ayuda esta entrada, si es así te agradecería un comentario o un compartir.

 

No olvides suscribirte al newsletter para enterarte de todas las novedades del blog.