jQuery parent().("selector")

Question

I have this HTML code:

<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> 

I'm using jQuery to hide all class="disabled" items:

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

I want to show disabled divs when I click the checkbox in the same row (tr). I tried

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

but it doesn't work.

Answer 1

Use .closest() and .find(), like this:

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

Your current code almost works, you need a .find() though, like this:

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

If you have many rows like this, use .delegate(), like this:

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

.delegate() instead binds one handler to the table for all of the input.chk elements to bubble up to. If you're looking to enable/disable, use change and .toggle() in addition to the above, like this:

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

This way if it's checked they show, if not they hide.