jQuery parent().("selector")

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

当我单击同一行(tr)中的复选框时,我想显示禁用的div.我试过了

$("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);
});

这样,如果它被检查,他们会显示,如果不是,他们会隐藏.