Curso de jQuery | 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

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

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