Question

I have the following HTML and jQuery code:

<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); 
});

From what I see, the no. of immediate children that <div id="outer"> has should be 1, but jQuery sees 4. Why is that?
However, if everyting inside ‘#outer’ was wrapped in another div (instead of <p>), then it sees only 1 immediate child (as expected).

EDIT: This is definitely a malformed HTML nesting issue (and thanks everyone for answering). But my question should, more appropriately, have been: Is jQuery aware of and imposes HTML nesting rules or is it the browser’s construction of DOM tree (which imposes nesting rules) and jQuery simply returns what is sees in DOM tree?

Answer 1

your html code is invalid. you cannot put p tag inside p tag

The paragraph element can be contained inside the elements “address”, “applet”, “blockquote”, “body”, “button”, “center”, “del”, “dd”, “div”, “fieldset”, “form”, “iframe”, “ins”, “li”, “map”, “noframes”, “noscript”, “object”, “td”, and “th”.

HTML inline elements are the only elements that may be contained within a paragraph element.

• a – Anchor which is used to create a link to another page or location
  in HTML.
• abbr – Denotes an abbreviation.
• acronym – Denotes an acronym.
• area – Define a map region in an image.
• b – Bold causes the text between the beginning and ending tag to be in bold font.
• basefont – Allows font changes.
• bdo – Overrides text direction with values of ltr (left to right) or rtl (right to left).
• big – Sets size of text to big .
• br – Break is a line break similar to a carriage return and line feed in most documents.
• cite – Used to mark titles of articles or other publications.
• code – Denotes computer program code.
• dfn – Denotes a definition.
• em – Denotes emphasis
• font – Allows font changes.
• i – Sets text between the tags to italics
• img – Allows placement of a graphical image in the page.
• input – Form input
• ins – Denotes inserted text.
• kbd – Denotes information typed from the keyboard.
• param – Used to add additional parameters to the object or applet elements.
• q – Used for short quotations
• s – Strike through text
• samp – Denotes a sample.
• small – Sets text size to small
• span – A container used to set special style to specific areas of the page.
• strike – Sets text to have a line struck through it.
• strong – Denotes strong emphasis which is basically bold
• sub – Subscript
• sup – Superscript
• textarea – A form for multiline text input.
• tt – Sets text style to monospaced teletype
• u – Sets text underlined between the beginning and ending tag.
• var – Denotes a variable in a program.