name - jQuery parent().("selector")

selectores jquery avanzados

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

Quiero mostrar divs deshabilitados cuando hago clic en la casilla de verificación en la misma fila (tr). Lo intenté

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

pero no funciona.

Answer 1

Ahora funciona: http://jsfiddle.net/WAQBj/2/

$(".disabled").hide();
$(".chk").click(function() {
$(this).closest(''tr'').find(".disabled").toggle();
});​

Answer 2

Casi. Solo falta la palabra find para indicar .find() .

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

O bien, una versión un poco más corta es .closest() .

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

También podría usar .parents() , aunque desearía indicar la :first coincidencia en caso de que haya tablas anidadas.

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

Answer 3

Es realmente aún 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 agregué algunas funcionalidades adicionales para que el evento no se disparara solo una vez, sino que cambia según la casilla de verificación esté marcada o no.

Answer 4

Sí, usar find() y closest() es definitivamente el procedimiento correcto. Hay un estilo diferente de escribir lo mismo. El fragmento de código está aquí.

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

Answer 5

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

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

Tu código actual casi funciona, pero necesitas un .find() , así:

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

Si tienes muchas filas como esta, usa .delegate() , así:

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

.delegate() lugar, .delegate() enlaza un controlador a la tabla para que todos los elementos de input.chk . Si está buscando habilitar / deshabilitar, use change y .toggle() además de los anteriores, así:

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

De esta forma, si se revisa, se muestran, si no se ocultan.

Answer 6

Y es aún más fácil:

$(".disabled").hide();
$(".chk").click(function() {
$(this).siblings(".disabled").toggle();
});​

:-)