.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中（而不是＆lt; p＆gt;），那么它只能看到一个直接子节点（如预期的那样）。

编辑：这绝对是一个格式错误的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”中“，”form“，”iframe“，”ins“，”li“，”map“，”noframes“，”noscript“，”object“，”td“和”th“。

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

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