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标签内包含'click here'链接时，警报调用返回'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/

关于您的查询，您可以在致电.parent()之前致电next()，以确保您获得其父母（即他的叔叔）的兄弟姐妹

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

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

    });
</script>

Answer 2

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

您可以做的另一件事是使用Next Adjacent选择器（http://api.jquery.com/next-adjacent-Selector/）

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

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

Jquery next（）没有得到下一个元素

2 个答案: