CODEWITHSUNDEEP
jqueryjquery-selectors
el_quick
el_quick

Reputation: 4756

jQuery parent().("selector")

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.

Upvotes: 30

Views: 80694

Answers (6)

Anji
Anji

Reputation: 723

Yes using find() and closest() is definitely the right procedure. There is a different style of writing the same. The code snippet is here.

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

Upvotes: 3

Nick Craver
Nick Craver

Reputation: 630429

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.

Upvotes: 67

nubbel
nubbel

Reputation: 1582

Now it works: http://jsfiddle.net/WAQBj/2/

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

Upvotes: 0

nubbel
nubbel

Reputation: 1582

And it's even easier: 

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

:-)

Upvotes: 0

Eric
Eric

Reputation: 135

Its actually even easier than that.

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

I even added some extra functionality so that the event didn't just trigger once, but rather toggles based on whether the check box is checked or not.

Upvotes: 0

user113716
user113716

Reputation: 322502

Almost. You're just missing the word find to indicate jQuery's .find() method.

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

Or, a little shorter version is to use .closest().

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

You could also use .parents(), though you would want to indicate the :first match in case you have nested tables.

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

Upvotes: 2

Related Questions