Question

$('p div').click(function(){
    $(this).css({
        'color':'#F00',
        'font':'bold 20px verdana',
        'background-color':'#0FF'
    });
});

HTML

<p>Hello<div> World!</div></p>

当我点击“世界”文字时，什么都没发生，当我查看萤火虫时，它说：

<p>Hello</p>
<div> World</div>
<p></p>

注意那些＆lt; p＆gt;标签

怎么会发生这种情况？

Answer 1

浏览器将<div>踢出<p>，因为它不是有效的展示位置，因此您无法在那里选择它。

浏览器通常会尝试对无效HTML进行更正，但结果不一定是可预测的，因此您需要使用有效的HTML。

http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

“P元素代表一个段落。它不能包含块级元素（包括P本身）。”

Answer 2

这很有趣。问题是你的浏览器工作正常，我讨厌发生这种情况。 P是内嵌标记，DIV是块标记（也就是说，它代表屏幕的矩形区域，而不是可能不规则的部分文本就像内嵌标签一样）并且有一条规则，你不能将内的块标签放在内联标签中，这就是你的浏览器解决它的方式。

编辑：我注意到@magicmike提出了一个很好的解决方案：

<p>Hello<span> World!</span></p>

Answer 3

浏览器不会尊重div在p内的展示位置。将其更改为span。这是a working Fiddle。

Answer 4

div出现在p内无效。这就是为什么Firefox重新安排你的[破解] HTML，你可以通过Firebug看到它的“固定”结果。 改为使用span。

另外，不要忘记将此事件处理程序设置放在onLoad处理程序中，因为当您的脚本最初运行时，p和span不一定存在：

$(function() {
    $('p span').click(function(){
        $(this).css({
            'color':            '#F00',
            'font':             'bold 20px verdana',
            'background-color': '#0FF'
        });
    });
});

Live demo.

如何使用jQuery访问<p>标签内的标签？</p>

4 个答案: