jQuery 父级()。 ("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()相反，将一个处理程序绑定(bind)到表，以便所有要冒泡的 input.chk 元素。如果您要启用/禁用，请使用 change 和 .toggle()除了上面的之外，像这样:

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

这样，如果选中，它们就会显示，如果没有选中，它们就会隐藏。