Accesos al hijo, al padre y al hermano

closest();

  • closest() devuelve la primera coincidencia envolviendo al elemento indicado (en este caso $(this)).
  • parent() devuelve el elemento inmediatamente por encima, sólo si este coincide con el selector especificado.
  • parents() devuelve todas las coincidencias por encima del elemento indicado.
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#boton").click(function(){
		alert($(this).closest("div").attr("id"));
	});
	$("#boton1").click(function(){
		alert($(this).parent("#capaIntermedia").attr("id"));
	});
	$("#boton2").click(function(){
		alert($(this).parents("div").eq(2).attr("id"));
	});
});
</script>
<div id="wrapper">
	<div id="capaIntermedia">
		<div id="capaMasInterna">
			<input type="button" id="boton"/>
			<input type="button" id="boton1"/>
			<input type="button" id="boton2"/>
		</div>
	</div>
</div>
Closest

find

Busca el input type="radio" y cambia su propiedad checked a true.

$(this).find('input:radio').prop('checked', true);

Ejercicio filas

Al pulsar sobre una fila, esta se colorea y se marca el radio button correspondiente a la fila pulsada.

siblings()

Al contrario que closest(), que devuelve el elemento situado por encima, siblings() devuelve el elemento ubicado al lado.

$(this).siblings("input").val()

Mezclar closest() con siblings()

La siguiente línea me devolverá el value de la select situada al lado del span que está envolviendo al elemento con el que acabo de interactuar.

$(this).closest("span").siblings("select").val();
Siblings
icono de mandar un mail¡Contacta conmigo!
Pablo Monteserín
contacta conmigoPablo Monteserín

¡Hola! ¿En qué puedo ayudarte?