Jquery next()没有获取next元素

Question

我有以下代码：

<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标记中时，警报调用返回“undefined”，但如果从链接中删除H1标记，警报调用将正确返回“acitem”。有了H1标记，我还尝试了：

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

但是这仍然返回'undefined‘。

我对JQuery中next()函数的工作原理有点困惑。有人知道为什么下一个函数只有在我从链接中删除H1标签时才能正常工作吗？我是不是做错了什么？

谢谢!

Answer 1

next()适用于兄弟，在您的结构中，<a>是<h1>的唯一子级，因此从技术上讲，调用next()不会返回任何结果，因为<a>是<h1>的唯一子级。因此，如果您删除<h1>，它为什么会起作用

引用文档：Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

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

nextUntil()获取一组元素，从选择器开始，但不包括作为参数给定的选择器，引用文档：Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.

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>

Answer 2

@andreas关于.next和.nextUntil的说法是对的。他对.parent的解决方案也很好。

你可以做的另一件事是使用下一个相邻的选择器( http://api.jquery.com/next-adjacent-Selector/ )

var element = $('h1 + div');

http://jsfiddle.net/jasongennaro/LMr5E/