Obtener el elemento padre con jQuery

Esteban Sierra

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.

1 comentario en «Obtener el elemento padre con jQuery»

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies