jquery - .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"> has 应该是 1，但是 jQuery 看到的是 4。为什么呢？但是，如果 '#outer' 内的所有内容都包装在另一个 div(而不是

)中，那么它只会看到 1 个直接子级(如预期)。

编辑:这绝对是一个格式错误的 HTML 嵌套问题(感谢大家的回答)。但更恰本地说，我的问题应该是:jQuery 是否意识到并强加 HTML 嵌套规则，或者浏览器构建 DOM 树(强加嵌套规则)而 jQuery 只是返回 DOM 树中看到的内容？

Answer 1

不幸的是，<p>元素不能包含其他 <p>元素。这就是 HTML 的工作原理。您需要使用<div>相反。