jQuery 父（）。（“选择器”）答案

【问题标题】：jQuery parent().("selector")jQuery 父（）。（“选择器”）
【发布时间】：2011-04-19 12:30:32
【问题描述】：

我有这个 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();
}) ;

但它不起作用。

【问题讨论】：

标签： jquery jquery-selectors

【解决方案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);
});

这样，如果选中，则显示，否则隐藏。

【讨论】：

.closest() 在 1.8 中被弃用和删除 api.jquery.com/closest（见页面底部）寻找 api.jquery.com/parentsUntil
如果您实际查看链接，最接近的不会被弃用，只是一个特定的签名。我没有看到任何迹象表明对 parentsUntil 的偏好超过了最接近的。
.closest()，运行良好，甚至 parent().parent().parent() 都在工作，但最接近的伎俩..及其更短的代码

【解决方案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();
});

【讨论】：

【解决方案3】：

实际上比这更容易。

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

我什至添加了一些额外的功能，以便事件不只是触发一次，而是根据复选框是否被选中进行切换。

【讨论】：

元素不是兄弟，它们位于不同的表格单元格中:) 如果它们是，简短的方法是：$(".chk").change(function() { $(this).siblings(".disabled").toggle(this.checked); });
我认为他们是兄弟姐妹，因为他们在同一个级别包含在一个共享的父级中。我正在关注你与 nubbel 的对话，你是对的，我用而没有做同样的事情。

【解决方案4】：

而且更简单：

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

:-)

【讨论】：

正如我对另一个答案的评论（除了这个不考虑初始状态），.disabled 元素不是兄弟姐妹:)
我是这么想的，正准备评论 Eric，但我试了一下：jsfiddle.net/jpQcu。似乎$.siblings() 返回位于树相同深度的元素。我认为$.nextAll() 是我们的意思。
@nubbel - .nextAll() 也仅适用于兄弟姐妹:)
@nubbel - 它不... jsfiddle.net/nick_craver/WAQBj 您的解决方案似乎只因为无效标记而起作用，将<tr> 直接放在<body> 中会导致各种混乱:)

【解决方案5】：

是的，使用find() 和closest() 绝对是正确的程序。有不同的写作风格。代码 sn-p 在这里。

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

【讨论】：

【解决方案6】：

现在可以了：http://jsfiddle.net/WAQBj/2/

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

【讨论】：