Question

我有以下代码：

<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

任何帮助。

Answer 1

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

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

编辑：您的脚本存在几个问题。我这样调整了它：

$(document).ready(function() {

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

});

tr通常拥有tbody。最好使用最近的。此外，next为您提供next元素，next的{{1}}元素为table ...

Answer 2

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

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

使其运作的方式

因此，您必须过滤掉所有兄弟姐妹，而不是简单地过滤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();
  });
});

Answer 3

这里有很多问题。

首先，不包括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();

Answer 4

问题是parent（）和next（）。（我假设您的HTML中包含jQuery，并且上面的代码已经过修整以便于阅读。）

.parent（）。parent（）的问题是浏览器呈现的问题。注意那里的额外内容，这是HTML所暗示的。您可以通过.parent（）。parent（）。parent（）来解决这个问题，但更强大的解决方案是使用.parents（'table'）。

对于next（）：

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

你的下一个兄弟是什么，没有“.divNote”类。因此，您的选择器不返回任你想改用nextAll（）。

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

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

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

Answer 5

你没有在那里包含jquery库。没有它，jquery代码都不会工作。

Answer 6

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

[编辑] 你有什么工作......因为你在一个不可见的空div上执行slideToggle，所以没有显示任何内容。如果你改变了样式，你可以看到div并给它一个高度，滑动切换就可以了。

还简化divNote的选择，如：

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

问题不一定在parent（）和next（）中，而在于您使用不可见实体的问题

使用parent（）和next（）选择器的jquery问题

6 个答案:

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

使其运作的方式