jQuery parent() ("selector")

Question

tengo este código HTML:.

<tr> 
    <td><input type="checkbox" class="chk" /></td> 
    <td><div class="disabled">text to hide 1</div></td> 
    <td><div class="disabled">text to hide 2</div></td> 
</tr> 

estoy usando jQuery para ocultar todos los artículos: class="disabled"

$("div.disabled").hide() ; 

que quiero mostrar divs con discapacidad cuando hago clic en la casilla de verificación en la misma fila (tr). Probé

$("input.chk").click(function(){ 
    $(this).parent().parent().(".disabled").show(); 
}) ; 

pero no funciona.

Answer 1

Uso .closest() y .find(), así:

$("input.chk").click(function(){ 
    $(this).closest('tr').find(".disabled").show(); 
}); 

su código actual casi obras, se necesita un .find() embargo, como esto:

$(this).parent().parent().find(".disabled").show(); 

Si tiene muchos filas así, use .delegate(), así:

$("table").delegate("input.chk", "click", function(){ 
    $(this).closest('tr').find(".disabled").show(); 
}); 

.delegate() en su lugar enlaza un controlador a la tabla para que todos los elementos input.chk burbujeen hasta. Si usted está buscando para activar/desactivar, utilizar y change.toggle(), además de lo anterior, así:

$("table").delegate("input.chk", "change", function(){ 
    $(this).closest('tr').find(".disabled").toggle(this.checked); 
}); 

esta manera, si se comprueba que muestran, si no se esconden.

Answer 2

Casi. Solo falta la palabra find para indicar jQuery's .find() method.

$("input.chk").click(function(){ 
    $(this).parent().parent().find(".disabled").show(); 
}) ; 

O, una versión más corta es use .closest().

$("input.chk").click(function(){ 
    $(this).closest('tr').find(".disabled").show(); 
}); 

Usted también podría use .parents(), aunque que se quiere indicar the :first partido en caso de tener tablas anidadas.

$("input.chk").click(function(){ 
    $(this).parents('tr:first').find(".disabled").show(); 
}); 

Answer 3

Es incluso más fácil que eso.

$(".disabled").hide(); 
    $(".chk").click(function(){ 
     if($(this).is(":checked")) 
     { 
      $(this).siblings(".disabled").show(); 
     } 
     else 
     { 
      $(this).siblings(".disabled").hide(); 
     } 
    }); 

incluso añade algunas funciones extra para que el evento no sólo se disparará una vez, sino que cambia en función de si la casilla de verificación está marcada o no.