使用 parent() 和 next() 选择器的 jquery 问题答案

【问题标题】：jquery problem using parent() and next() selectors使用 parent() 和 next() 选择器的 jquery 问题
【发布时间】：2011-05-14 14:59:51
【问题描述】：

我有以下代码：

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Untitled Page</title>
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".Note").click(function(){
        $(this).parent().parent().next(".divNote").slideToggle();
        });
    });
    </script>

  </head>
  <body>
    <table>
        <tr>
            <td class="Note" style="cursor: pointer">
                <font size="3" color="#800080"><b><u>TD</u></b> </font>
            </td>
        </tr>
    </table>
    <br />
    <div style="display: none" class="divNote">
    </div>
  </body>
</html>

我可以弄清楚为什么它不起作用。

示例：Here

任何帮助。

【问题讨论】：

感谢 Meder 指出文档引用，但即使删除它，仍然不起作用。

标签： jquery parent next

【解决方案1】：

$('document') 是一个空引用。删除引号，使其引用对象而不是名为 document 的 HTML 元素。

之后，它应该可以工作。另外，请包含 jQuery 库并包含 DOCTYPE...

编辑：您的脚本有几个问题。我是这样调整的：

$(document).ready(function() {

$(".Note").click(function(){
        $(this).closest('table').nextAll("div.divNote").slideToggle();
        });

});

tr 有一个 tbody 通常拥有它。最好使用最近的。此外，next 为您提供next 元素，table 的next 元素是br...

【讨论】：

它适用于$('document')，因为它并没有真正使用选择的任何内容（如果有的话）。 jsfiddle.net/patrick_dw/qSJLM

【解决方案2】：

您没有在其中包含 jquery 库。没有它，任何 jquery 代码都无法工作。

【讨论】：

【解决方案3】：

您没有在页面上包含对 jQuery 的引用...将其添加到头部

[编辑]你有什么作品..它只是没有显示任何东西，因为你正在一个不可见的空div上执行slideToggle。如果您更改样式以便可以看到 div 并为其指定高度，那么滑动切换就可以了。

还简化了divNote的选择如：

$(".divNote").slideToggle("slow");

问题不一定出在 parent() 和 next() 上，而更多在于您正在使用不可见的实体

【讨论】：

我已经添加了，感谢您指出这一点，即使添加也不起作用。

【解决方案4】：

这里有很多问题。

首先，不包括 jQuery。通过添加来包含 jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

到你的头标签。

其次，您应该引用$(document)，不带引号。

某些浏览器（经过 Firefox 测试）会自动插入 tbody 元素。您可以通过console.log($(this).parent().parent()) 进行检查。

解决办法是$(this).parents("table").nextAll(".divNote").slideToggle();

【讨论】：

抱歉，错过了那个。使用 nextAll(".divNote")。

【解决方案5】：

让我解释一下为什么它不起作用

您已向 next() 函数添加了一个过滤器，该过滤器仅过滤掉匹配的元素。在您的情况下，它只包含一个没有匹配类名的元素 (br)，因此结果集被截断为 zero 元素。

让它工作的方法

因此，您必须从所有兄弟姐妹中过滤掉，而不是简单地过滤 next 元素：

$(document).ready(function() {
  $(".Note").click(function(){
    $(this).parents("table").siblings(".divNote").slideToggle();
  });
});

或从所有下一个兄弟姐妹中过滤掉（当以前的兄弟姐妹根本不相关时）

$(document).ready(function() {
  $(".Note").click(function(){
    $(this).parents("table").nextAll(".divNote").slideToggle();
  });
});

【讨论】：

感谢您的解释，我现在知道为什么它不起作用了。
因为解释而选择这个作为答案。
谢谢塞萨尔。结构 FTW。 ;)
帮我完成了我需要做的其他事情，非常有帮助

【解决方案6】：

问题在于 parent() 和 next()。（我假设您在 HTML 中使用了 jQuery，并且为了便于阅读，对上面的代码进行了修剪。）

.parent().parent() 的问题在于浏览器将其呈现为 .parent().parent() 。请注意其中的额外内容，这是您的 HTML 所暗示的。你可以通过 .parent().parent().parent() 解决这个问题，但更强大的解决方案是使用 .parents('table')。

对于下一个（）：

获取匹配元素集中每个元素的紧随其后的兄弟。如果提供了选择器，则仅当它与该选择器匹配时才会检索下一个兄弟。

你的下一个兄弟是
，它没有类“.divNote”。因此，您的选择器不返回任何内容。您想改用 nextAll()。

把所有这些放在一起......

$(".Note").click(function(){
    $(this).parents('table')
         .nextAll(".divNote").slideToggle();
});

在这里工作 jsFiddle：http://jsfiddle.net/6WrjH/

【讨论】：