jQuery Selector Context Comparison

Benchmark created by n_sonic on

Description

Comparing different methods of selecting elements with a DOM context.

Preparation HTML

<div id="master">
  <p class="child">
    Hi there.
  </p>
  <div class="child">
    <p>
      This is a paragraph.
    </p>
  </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery Selector w/ Parent Selector ID
var $kids = $('#master .child');
ready
jQuery Selector w/ Selector Context
var $kids = $('.child', $('#master'));
ready
jQuery Selector w/ Find
var $kids = $('#master').find('.child');
ready
jQuery Selector w/ Native
var $kids = $(document.getElementById('master')).find('.child');
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by n_sonic on