Info

To modify the actual context of a selector (i.e. cause it to not search the default context - the entire document node - but instead scope to only the specified node) the context attribute must be a DOM Node - not a jQuery selector or even a jQuery collection. If a jQuery selector or collection is used, context acts simply as a wrapper for .find (and will therefore always be slower.)

src: http://brandonaaron.net/blog/2009/06/24/understanding-the-context-in-jquery

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id='myDiv'>
        <p>hello <a href="http://www.example.com/"><span id="mySpan">link</span></a></p>
        <p>world <a href="http://www.example.com/"><span id="mySpan">link</span></a></p>
</div>
<script>
  if (!window.console || !window.console.log) {
   throw 'console.log() is not supported. Please install Firebug. http://getfirebug.com'
  }
</script>
<script>
  Benchmark.prototype.setup = function() {
    var $myDiv = $("#myDiv"),
        myDiv = $myDiv[0];
  };
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

$myDiv.find('#mySpan');

$('#mySpan', myDiv);

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

• Revision 1: published on 6th December 2011
• Revision 2: published on 12th February 2012
• Revision 3: published by Denny Caldwell on 16th November 2012
• Revision 4: published on 7th February 2013
• Revision 6: published on 2nd April 2013

0 comments