jquery get first child

Benchmark created by Dan Manastireanu on

Description

Test the performance of different methods to get the first child in jquery

Preparation HTML

<div id="test">
<span>first</span>
<span>second</span>
<span>....</span>
<span>....</span>
<span>....</span>
<span>....</span>
<span>....</span>
<span>....</span>
<span>....</span>
<span>....</span>
<span>....</span>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  function assertEq(expected, actual) {
   if (expected !== actual) {
    throw new Error('Expected "' + expected + '" but found "' + actual + '"');
   }
  }
  
  function isValid(el) {
   assertEq('first', el.text());
  }
  
  (function($) {
   $.fn.down = function() {
    return $(this[0] && this[0].children && this[0].children[0]);
   };
  })(jQuery);
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
children().first();
isValid($('#test').children().first());
ready
children(':eq(0)');
isValid($('#test').children(':eq(0)'));
ready
down
isValid($('#test').down());
ready
children(':first');
isValid($('#test').children(':first'));
ready
*:first
isValid($('#test *:first'));
ready
children().eq(0);
//first() is just a shortcut for eq(0)
isValid($('#test').children().eq(0));
ready
find(':first');
isValid($('#test').find(':first'));
ready

Revisions

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

  • Revision 1: published by Dan Manastireanu on
  • Revision 2: published by Dan Manastireanu on
  • Revision 3: published on