Curso de jQuery | 10. Accesos al hijo, al padre y al hermano

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

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>

find

$(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();