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

dldeef67  于 2023-05-17  发布在  jQuery
关注(0)|答案(6)|浏览(196)

我有以下代码:

<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
任何帮助。

6kkfgxo0

6kkfgxo01#

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

您已经向next()函数添加了一个过滤器,它只过滤出匹配的元素。在您的例子中,它只包含一个元素(br),该元素没有匹配的类名,因此结果集被截断为个元素。

The way to make it work

因此,不是简单地过滤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();
  });
});
rvpgvaaj

rvpgvaaj2#

$('document')是空引用。删除引号,使其引用对象而不是名为document的HTML元素。
在那之后,它应该工作。另外,请包含jQuery库并包含DOCTYPE...

**编辑:**你有 * 几个 * 问题的脚本。我是这样调整的:

$(document).ready(function() {

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

});

tr通常有一个tbody拥有它。最好用最近的。另外,next给出了next元素,tablenext元素是br ...

vfh0ocws

vfh0ocws3#

这里有很多地方是错的。
首先,不包括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();

8iwquhpp

8iwquhpp4#

问题是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/

wqlqzqxt

wqlqzqxt5#

这里没有包含jquery库。没有它,任何jquery代码都无法正常工作。

w8rqjzmb

w8rqjzmb6#

你没有在你的页面上包含对jQuery的引用...在头部添加它

**[编辑]**你所做的工作..它只是没有显示任何东西,因为你正在执行一个不可见的,空的div上的slideToggle。如果您更改样式以便可以看到div并给予高度,则可以使用幻灯片切换。

还可以简化divNote的选择,如:

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

问题不一定出在parent()和next()中,更多的是你正在处理一个不可见的实体

相关问题