.children()jQuery选择器返回多个级别的子级

Question

我有以下HTML和jQuery代码:

<div id="outer">
 <p>
    <p>paragraph inside division.</p>
    <h2>a heading</h2>
    <ul>
        <li>first item</li>
        <li>second item</li>
    </ul>
 </p>
</div>

jQuery的:

$(function() {
    $divChildren = $('div#outer').children();
    $divChildren.each(function(){
        $(this).css('background-color', 'red'); 
    });
    alert($divChildren.length); 
});

从我看到的,没有.直系孩子<div id="outer">应该是1,但jQuery看到4.为什么？但是,如果'#outer'内部的每一个都包含在另一个div(而不是<p>)中,那么它只能看到一个直接子节点(如预期的那样).

编辑:这绝对是一个格式错误的HTML嵌套问题(并感谢大家的回答).但是,我的问题应该更恰当地说:jQuery是否了解并强制执行HTML嵌套规则,还是浏览器构建DOM树(强加嵌套规则),jQuery只返回DOM树中看到的内容？

Answer 1

不幸的是,<p>元素不能包含其他<p>元素.这就是HTML的工作原理.你需要使用一个<div>代替.

Answer 2

你的HTML代码无效.你不能把p标签内的p标签

段落元素可以包含在元素"address","applet","blockquote","body","button","center","del","dd","div","fieldset","形式","iframe","ins","li","map","noframes","noscript","object","td"和"th".

HTML内联元素是可以包含在段落元素中的唯一元素.

• a - 用于在HTML中创建指向其他页面或位置的链接的锚点.
• abbr - 表示缩写.
• 首字母缩略词 - 表示首字母缩略词.
• area - 在图像中定义地图区域.
• b - 粗体导致开始和结束标记之间的文本以粗体显示.
• basefont - 允许字体更改.
• bdo - 使用ltr(从左到右)或rtl(从右到左)的值覆盖文本方向.
• big - 将文本大小设置为big.
• br - Break是一个换行符,类似于大多数文档中的回车符和换行符.
• 引用 - 用于标记文章或其他出版物的标题.
• 代码 - 表示计算机程序代码.
• dfn - 表示定义.
• em - 表示强调
• font - 允许字体更改.
• i - 将标记之间的文本设置为斜体
• img - 允许在页面中放置图形图像.
• 输入 - 表单输入
• ins - 表示插入的文本.
• kbd - 表示从键盘输入的信息.
• param - 用于向对象或applet元素添加其他参数.
• q - 用于短报价
• s - 通过文字打击
• samp - 表示样本.
• small - 将文本大小设置为小
• span - 用于为页面的特定区域设置特殊样式的容器.
• strike - 将文本设置为有一条线穿过它.
• 强 - 表示强调,基本上是大胆的
• 分下标
• sup - 上标
• textarea - 多行文本输入的表单.
• tt - 将文本样式设置为等宽电传类型
• u - 在开始和结束标记之间设置带下划线的文本.
• var - 表示程序中的变量.