jQuery的父（）（ 「選擇」）

Question

我有這樣的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> 

我使用jQuery來隱藏所有class="disabled"項目：

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

我想展示殘疾人的div當我點擊同一行（tr）中的複選框時。 我試過

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

但它不起作用。

Answer 1

使用.closest()和.find()，像這樣：

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

您當前的代碼幾乎的作品，你需要一個.find()不過，像這樣：

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

如果你有許多行像這樣，使用.delegate()，像這樣：

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

.delegate()而是將一個處理程序綁定到所有input.chk元素的表格，以便向上吸氣。如果你正在尋找啓用/禁用，使用change和.toggle()除了上面，像這樣：

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

這樣，如果它的檢查，他們表示，如果他們不隱瞞。

Answer 2

差不多。你只是錯過了find這個詞來表示jQuery's .find() method。

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

或者，稍小一點的版本是use .closest()。

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

你也可以use .parents()，儘管你想表明你已經嵌套表的情況下the :first比賽。

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

Answer 3

它實際上比這更容易。

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

我甚至增加了一些額外的功能，這樣的事件不只是觸發一次，而是基於該複選框是否被選中或不切換。