当前位置 : 主页 > 网页制作 > JQuery >

Jquery next()没有得到下一个元素

来源:互联网 收集:自由互联 发布时间:2021-06-15
我有以下代码: h1a href="#" class="link"Click here/a/h1div class="acitem"/divdiv class="acitem2"/divscript $(document).ready(function() { $('a.link').click(function() { var element = $(this).next(); alert(element.attr('class')); });
我有以下代码:

<h1><a href="#" class="link">Click here</a></h1>
<div class="acitem"></div>
<div class="acitem2"></div>

<script>
    $(document).ready(function() {
        $('a.link').click(function() {
            var element = $(this).next();

            alert(element.attr('class'));
        });

    });
</script>

当我在H1标签内部包含“点击此处”链接时,警报调用将返回“未定义”,但如果我从链接中删除H1标签,则警报调用将正确返回“acitem”.有了H1标签,我也尝试过:

$(this).nextUntil('.acitem')

但这仍然会返回’undefined’.

关于next()函数在JQuery中是如何工作的我有点困惑.只有当我从链接中删除H1标签时,任何人都知道为什么下一个功能正常工作?有什么我做错了吗?

谢谢!

next()适用于兄弟姐妹,在你的结构中,< a>是唯一的孩子< h1>有,所以调用next()在技术上将不返回任何< a>是< h1>的唯一儿子.因此,如果您删除< h1>

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

http://api.jquery.com/next/

nextUntil()从选择器开始获取一组元素,但不包括作为参数给出的选择器,引用文档:获取每个元素的所有后续兄弟,但不包括选择器,DOM节点或jQuery匹配的元素对象通过.

http://api.jquery.com/nextUntil/

关于你的查询,你可以在调用next()之前调用.parent(),以确保你得到它的父亲(即他的叔叔)的兄弟姐妹

<script>
    $(document).ready(function() {
        $('a.link').click(function() {
            var element = $(this).parent().next();

            alert(element.attr('class'));
        });

    });
</script>
网友评论