jQuery selectors not what I expected

Question

Using jQuery 1.4.2 (IE8 in compatibility mode)

Given the following structure:

<div id='something'>something</div>
<div id='parental'>
    <div><p>hi there</p> goats</div>
    <p>hello again</p>
</div>
<div> end of the line</div>

and this code:

var Fred= $('#parental');
$('div').css({color: 'blue'});
Fred.children('div').css({color: 'red'});
Fred.children('div').children('p').css({color:'green',border:'solid red 2px'});
Fred.children('div p').css({color: 'orange'});
Fred.children('div>p').css({border:'solid #FFFF00 2px'});

• "something" and " end of the line" are blue as I would expect
• "goats" is red as I would expect.
• "hi there" is green with red border (I expected it to be orange/yellow border)
• "hello again" is orange with yellow border (not what I expected).

Why do the Fred.children('div p') selector and the Fred.children('div').children('p') and Fred.children('div>p') not select the same thing?

See it in action here: http://jsfiddle.net/bxAzN/

Answer 1

try changing children to find

var Fred= $('#parental');
$('div').css({
    color: 'blue'
});
Fred.children('div').css({
    color: 'red'
});
Fred.find('div').find('p').css({
    color: 'green',border:'solid red 2px'
});
Fred.find('div p').css({
    color: 'orange'});

Fred.find('div>p').css({
    border:'solid #FFFF00 2px'
});​

its selecting same "hi there"

http://jsfiddle.net/bxAzN/2/

Children only looks at the immediate children of the node, while find traverses the entire DOM below the node, so children will be faster. Which to use depends on whether you only want to consider the immediate descendants or all nodes below this one in the DOM. -tvanfosson

Both children and find won't necessarily give the same result: find() will get you any descendant node, whereas children() will only get you immediate children that match.

Thus, find() will be slower since it must search for every descendant node that could be a match, and not just immediate children. -John Feminella

Answer 2

Because .children() does the following:

Get the children of each element in the set of matched elements, optionally filtered by a selector.

Now take div p. The only children of #parental are a div and a p element. .children('div p') only matches the p element as it has a div as ancestor (#parental itself). But the div child clearly not matches this selector.
You should think about children() as get all children filtered by this selector which is different from get all descendants that match this selector. For this you would have to use find().

Fred.children('div').children('p') in contrast first takes all div children of Fred and then selects all the div's p children.

Answer 3

children() is the equvalent of doing ">" in the selector.

jquery website says it...

only travels a single level down the DOM tree

therefore using children('div p') won't work because you're trying to look two stages down the DOM tree. Using children('div>p') does work because its effectively 1 selector, although I realise why thats confusing.

If you want a function to do what you're trying to do you need to look at find().