Info

What's the fastest way to get a child in jQuery? .children(), .next() or :first-child? I know the class-name in advance.

http://www.quora.com/Whats-the-fastest-way-to-get-a-child-in-jQuery

Preparation code

<div id="parent" class="parent">
  <div id="child" class="child">
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
  var p = $('#parent');
</script>

Preparation code output

Test runner

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

Java applet disabled.

var c = $('#parent').children()[0];

var c = $('#parent').children('.child')[0];

var c = $('.child:first-child')[0];

var c = $('#parent .child:first-child')[0];

var c = $('#parent :first-child')[0];

// When you already have an object p = $('#parent')
var c = p.children()[0];

// If there's a huge speed improvement here, try the other variations with p instead of $('#parent')

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 by Todd on 18th February 2011
• Revision 4: published by Marco Rogers on 26th February 2011 and last updated on 27th February 2011
• Revision 5: published on 5th October 2011
• Revision 6: published on 5th October 2011
• Revision 7: published on 13th January 2012
• Revision 9: published on 14th June 2012
• Revision 10: published by Matthew Callis on 19th June 2012
• Revision 11: published on 18th September 2012

0 comments