Question

我正在研究一个jQuery代码，它应该在相应的链接（<p>）悬停时显示工具提示（<a>）。为此，我使用next()函数找到工具提示，该工具提示始终位于相应的链接之后令人惊讶的是，当链接和工具提示元素位于next()元素内时，<p>不返回任何元素。但是，当我将这两个放在<div>中时，它可以正常工作 - 找到下一个元素我在jsfiddle.net上创建了一个条目来帮助解释我的问题：
http://jsfiddle.net/zwEAZ/
当悬停第二个链接时，代码中的console.log()行始终记录0 我很好奇为什么它表现得那样。提前感谢您的任何答案。

编辑：我也在这里发布代码（我假设你在与HTML文档相同的目录中有jquery-1.11.0.js）：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="jquery-1.11.0.js"></script>
        <script>
            $(function() {
                $('.link').mouseenter(function(event) {
                    $(this).next().css({
                        left: event.pageX + 10 + 'px',
                        top: event.pageY + 10 + 'px'
                    }).stop().fadeIn(500);
                    console.log($(this).next().length);
                }).mouseleave(function() {
                    $(this).next().stop().fadeOut(250);
                });
            });
        </script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .tooltip {
                display: none;
                position: absolute;
                background-color: #ccc;
                border: 1px solid #000;
            }
        </style>
    </head>
    <body>
        Here it works:
        <a href="#" class="link">Link</a>
        <p class="tooltip">Tooltip</p>

        <p>
            And here it doesn't...
            <a href="#" class="link">Link</a>
            <p class="tooltip">Tooltip</p>
        </p>

        <div>
            But here it works again!
            <a href="#" class="link">Link</a>
            <p class="tooltip">Tooltip</p>
        </div>
    </body>
</html>

Answer 1

由于p不能包含其他p元素，因此它是无效的HTML。

因此，如果您使用浏览器开发工具检查html，您将看到结构被修改为

<body>
    Here it works:
    <a href="#" class="link">Link</a>
    <p class="tooltip">Tooltip</p>

    <p>
        And here it doesn't...
        <a href="#" class="link">Link</a>
    </p>
    <p class="tooltip">Tooltip</p>
    <p></p>

    <div>
        But here it works again!
        <a href="#" class="link">Link</a>
        <p class="tooltip">Tooltip</p>
    </div>

</body>

现在link没有下一个兄弟元素

Answer 2

P元素只允许包含内联元素。

浏览链接http://www.w3.org/TR/html401/struct/text.html#h-9.3.1 这表示P元素＆＃34;不能包含块级元素（包括P本身）。＆＃34;

从第二个代码块中删除<p>元素

And here it doesn't...

<a href="#" class="link">Link</a>
<p class="tooltip">Tooltip</p>

next（）在<p>元素</p>中失败

2 个答案: