Is jQuery('.foo').find('.bar') equivalent to jQuery('.bar', jQuery('.foo'))?

Question

Using:

var $a = $('.foo').find('.bar');

var $b = $('.bar', $('.foo'));

I know $b will have its context set to $('.foo'), while $a. Aside from that, I believe the two objects are the same, correct?

Follow up Qs:

1. Will the perf be the same as well since the search is rooted off of the same object effectively?
2. Does a more strict context improve perf in terms of core jquery operations at all? (I know it's intended for plugin usage.)

Thanks!

Answer 1

EDIT:

yes, they are equivalent, here's the source

// HANDLE: $(expr, [context])
// (which is just equivalent to: $(content).find(expr)
} else
    return jQuery( context ).find( selector );

To use context effectively, it needs to be an HTMLElement, otherwise the context is document

find() is implemented as such in jQuery 1.3.2

find: function( selector ) {
 if ( this.length === 1 ) {
  var ret = this.pushStack( [], "find", selector );
  ret.length = 0;
  jQuery.find( selector, this[0], ret );
  return ret;
 } else {
  return this.pushStack( jQuery.unique(jQuery.map(this, function(elem){
   return jQuery.find( selector, elem );
  })), "find", selector );
 }
}

find() uses the Sizzle selector engine to do the actual finding work (take a look at line 2364 in the jQuery source).

and pushStack is

// Take an array of elements and push it onto the stack
// (returning the new matched element set)
pushStack: function( elems, name, selector ) {
 // Build a new jQuery matched element set
 var ret = jQuery( elems );

 // Add the old object onto the stack (as a reference)
 ret.prevObject = this;

 ret.context = this.context;

 if ( name === "find" )
  ret.selector = this.selector + (this.selector ? " " : "") + selector;
 else if ( name )
  ret.selector = this.selector + "." + name + "(" + selector + ")";

 // Return the newly-formed element set
 return ret;
}

Brandon Aaron has written a great article on understanding the context in jQuery

Answer 2

Yes, the results would be the same. Performance should be identical as well, but that's what testing is for!

There is a property on the resulting jQuery object which shows the selector used to find the matches. Check it out in your debugger. They may even be the same between the two methods.