Question

在正文中考虑以下HTML5代码：

<p id="p1">
    Email: <input type="text" name="email" /><br />
    Name: <input type="text" name="name" /><br />
    <input type="submit" name="submit" value="Submit" />
</p>
<p id="p2">
    <form action="/index.php">
        Email: <input type="text" name="email" /><br />
        Name: <input type="text" name="name" /><br />
        <input type="submit" name="submit" value="Submit" />
    </form>
</p>

以下javascript代码：

$(document).ready(function() {
    alert("$(#p1 input).length: " + $("#p1 input").length + "\n$(#p2 input).length: " + $("#p2 input").length);
});

以下是不同浏览器的输出：

Internet Explorer 9.0.8112.16421

$(#p1 input).length: 3
$(#p2 input).length: 3

Chromium版本20.0.1132.47 Ubuntu 12.04（144678）

$(#p1 input).length: 3
$(#p2 input).length: 0

适用于Ubuntu 17.0.1的Mozilla Firefox

$(#p1 input).length: 3
$(#p2 input).length: 0

任何人都可以解释原因吗？

http://jsfiddle.net/LKStL/2/

Answer 1

阐述我的评论：

form元素中不允许使用p等块元素。它是无效的HTML，因此jQuery打破了尝试解析它。我只能推测它可能在Internet Explorer中有效，因为Explorer不遵循HTML呈现标准（即：它应该中断但不会）。

解决方案：将form标记放在p之外或将p更改为允许使用块元素的元素，例如div

关于jQuery选择器的不同浏览器行为

1 个答案: