views:

134

answers:

1

There are some preferences I have observed for the selection syntax such as:

 $('#mydiv > a.selectMe').hide();
 $('#mydiv').children('a.selectMe').hide();

To me, it seems a bit confusing as the documentation for jQuery is a bit ambiguous here:

" parent > child Returns: Array Matches all child elements specified by "child" of elements specified by "parent". "

and

" children( expr ) Returns: jQuery Get a set of elements containing all of the unique immediate children of each of the matched set of elements. "

The question that needs to be clarified in MY mind is whether the first form returns ALL children/grandchildren or just the immediate children as the second form indicates is true. One of these is the "selector" form and the other under "traversing" on the jQuery documentation pages, which to me are similar functional tasks but not exactly the same thing.

SO, the questions here are:
Which form is faster? Do they REALLY select the same thing, or does the 'parent > child' form select grand children as well as immediate children?

+1  A: 

$('#mydiv a.selectMe') - Finds all anchors with the class 'selectMe' that are decendents of the tag with ID "mydiv". These could be nested deeply.

$('#mydiv > a.selectMe') - Finds immediate children.

As for which is faster between your two examples of getting immediate children... I did some time trials to test.

I had a page with 10,000 anchor tags with the class 'selectMe', within a Div with ID 'mydiv'.

$("#mydiv").children("a.selectMe") - 485ms
$("#mydiv > a.selectMe") - 374ms

Basically, it's a negligible difference though doing everything using selectors was consistently faster. If you have 10k anchors on a page, you're facing an entirely different problem, though. :-)

Kevin Buchan
$('#mydiv a.selectMe') is NOT the same as $('#mydiv > a.selectMe'), the first sets the context to a.selectMe prior to the select the second is the child selector.
Mark Schultheiss
Not sure if you're responding to my response or to the original post.I am also saying they're NOT the same. When I refer to the time trials, I am referring to the original poster's two examples, not my own.It's also entirely possible that I'm misreading your comment.
Kevin Buchan
Hey, Mark, I just noticed (silly me) that you *are* the original poster.Does my response make sense?What I meant to convey by the two code snippets is a response to your comment "The question that needs to be clarified in MY mind...". YOUR first form returns only immediate children. MY first form returns all descendents.Does that help?
Kevin Buchan
Yes, understood about the "all decendents", and thus basically you are indicating that both my forms would return the immediate children and no other decendents, so then given that is a true statement, the clarification on which form is faster remains.
Mark Schultheiss
Added time trial information.
Kevin Buchan
Accepting this answer based on your metrics and efforts, thanks. Probably still some browser specific metrics yet to get a full statistical confirmation, but good enough for this question.
Mark Schultheiss