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 mailPreguntame lo que quieras!
Pablo Monteserín
contacta conmigoPablo Monteserín

El servicio de resolución de dudas técnicas es sólo para los usuarios premium. Si tienes cualquier otra duda, usa el formulario de contacto. ¡Gracias!