jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.

jsperf.com URLs are mirrored at the same path, e.g:

https://jsperf.com/negative-modulo/2

Can be accessed at:

https://jsperf.app/negative-modulo/2

nth child element using jQuery (v4)

Revision 4 of this benchmark created on July 10, 2012

Description

Fastest method for acquiring nth child element as a jQuery object reference. Note that the final objective is to have a reference as a jQuery object - using index array requires passing the element back into jQuery to be a valid and equal test. If the id is known and used, the fastest method is to use this method, even though the element must be passed back in to jQuery. However, this is not the fastest method if using the generic ul tag. While it is obvious that reducing the subset with an id selector is faster than not, it may not be so obvious that the fastest method used to find nth child when working with a subset of a single instance (id) is not the same as the fastest method for finding an nth child of an unknown quantity

Preparation HTML

<div>
        <ul id="ul1">unordered list
                <li>item 1</li>
                <li>item 2</li>
                <li>item 3</li>
                <li>item 4</li>
                <li>item 5</li>
                <li>item 6</li>
                <li>item 7</li>
        </ul>
        <ul>unordered list - nested children
                <li>item 1
                        <ul>
                                <li>sub item 1</li>
                                <li>sub item 2</li>
                                <li>sub item 3</li>
                                <li>sub item 4</li>
                                <li>sub item 5</li>
                                <li>sub item 6</li>
                                <li>sub item 7</li>
                        </ul>
                </li>
                <li>item 2
                        <ul>
                                <li>sub item 1</li>
                                <li>sub item 2</li>
                                <li>sub item 3</li>
                                <li>sub item 4</li>
                                <li>sub item 5</li>
                                <li>sub item 6</li>
                                <li>sub item 7</li>
                        </ul>
                </li>
                <li>item 3
                        <ul>
                                <li>sub item 1</li>
                                <li>sub item 2</li>
                                <li>sub item 3</li>
                                <li>sub item 4</li>
                                <li>sub item 5</li>
                                <li>sub item 6</li>
                                <li>sub item 7</li>
                        </ul>
                </li>
                <li>item 4
                        <ul>
                                <li>sub item 1</li>
                                <li>sub item 2</li>
                                <li>sub item 3</li>
                                <li>sub item 4</li>
                                <li>sub item 5</li>
                                <li>sub item 6</li>
                                <li>sub item 7</li>
                        </ul>
                </li>
                <li>item 5
                        <ul>
                                <li>sub item 1</li>
                                <li>sub item 2</li>
                                <li>sub item 3</li>
                                <li>sub item 4</li>
                                <li>sub item 5</li>
                                <li>sub item 6</li>
                                <li>sub item 7</li>
                        </ul>
                </li>
                <li>item 6
                        <ul>
                                <li>sub item 1</li>
                                <li>sub item 2</li>
                                <li>sub item 3</li>
                                <li>sub item 4</li>
                                <li>sub item 5</li>
                                <li>sub item 6</li>
                                <li>sub item 7</li>
                        </ul>
                </li>
                <li>item 7
                        <ul>
                                <li>sub item 1</li>
                                <li>sub item 2</li>
                                <li>sub item 3</li>
                                <li>sub item 4</li>
                                <li>sub item 5</li>
                                <li>sub item 6</li>
                                <li>sub item 7</li>
                        </ul>
                </li>
        </ul>
</div>
<div>
        <ul>unordered list
                <li>item 1</li>
                <li>item 2</li>
                <li>item 3</li>
                <li>item 4</li>
                <li>item 5</li>
                <li>item 6</li>
                <li>item 7</li>
        </ul>
        <ul>unordered list - nested children
                <li>item 1
                        <ul>
                                <li>sub item 1</li>
                                <li>sub item 2</li>
                                <li>sub item 3</li>
                                <li>sub item 4</li>
                                <li>sub item 5</li>
                                <li>sub item 6</li>
                                <li>sub item 7</li>
                        </ul>
                </li>
                <li>item 2
                        <ul>
                                <li>sub item 1</li>
                                <li>sub item 2</li>
                                <li>sub item 3</li>
                                <li>sub item 4</li>
                                <li>sub item 5</li>
                                <li>sub item 6</li>
                                <li>sub item 7</li>
                        </ul>
                </li>
                <li>item 3
                        <ul>
                                <li>sub item 1</li>
                                <li>sub item 2</li>
                                <li>sub item 3</li>
                                <li>sub item 4</li>
                                <li>sub item 5</li>
                                <li>sub item 6</li>
                                <li>sub item 7</li>
                        </ul>
                </li>
                <li>item 4
                        <ul>
                                <li>sub item 1</li>
                                <li>sub item 2</li>
                                <li>sub item 3</li>
                                <li>sub item 4</li>
                                <li>sub item 5</li>
                                <li>sub item 6</li>
                                <li>sub item 7</li>
                        </ul>
                </li>
                <li>item 5
                        <ul>
                                <li>sub item 1</li>
                                <li>sub item 2</li>
                                <li>sub item 3</li>
                                <li>sub item 4</li>
                                <li>sub item 5</li>
                                <li>sub item 6</li>
                                <li>sub item 7</li>
                        </ul>
                </li>
                <li>item 6
                        <ul>
                                <li>sub item 1</li>
                                <li>sub item 2</li>
                                <li>sub item 3</li>
                                <li>sub item 4</li>
                                <li>sub item 5</li>
                                <li>sub item 6</li>
                                <li>sub item 7</li>
                        </ul>
                </li>
                <li>item 7
                        <ul>
                                <li>sub item 1</li>
                                <li>sub item 2</li>
                                <li>sub item 3</li>
                                <li>sub item 4</li>
                                <li>sub item 5</li>
                                <li>sub item 6</li>
                                <li>sub item 7</li>
                        </ul>
                </li>
        </ul>
        <ul>unordered list
                <li>item 1</li>
                <li>item 2</li>
                <li>item 3</li>
                <li>item 4</li>
                <li>item 5</li>
                <li>item 6</li>
                <li>item 7</li>
        </ul>
        <ul>unordered list - nested children
                <li>item 1
                        <ul>
                                <li>sub item 1</li>
                                <li>sub item 2</li>
                                <li>sub item 3</li>
                                <li>sub item 4</li>
                                <li>sub item 5</li>
                                <li>sub item 6</li>
                                <li>sub item 7</li>
                        </ul>
                </li>
                <li>item 2
                        <ul>
                                <li>sub item 1</li>
                                <li>sub item 2</li>
                                <li>sub item 3</li>
                                <li>sub item 4</li>
                                <li>sub item 5</li>
                                <li>sub item 6</li>
                                <li>sub item 7</li>
                        </ul>
                </li>
                <li>item 3
                        <ul>
                                <li>sub item 1</li>
                                <li>sub item 2</li>
                                <li>sub item 3</li>
                                <li>sub item 4</li>
                                <li>sub item 5</li>
                                <li>sub item 6</li>
                                <li>sub item 7</li>
                        </ul>
                </li>
                <li>item 4
                        <ul>
                                <li>sub item 1</li>
                                <li>sub item 2</li>
                                <li>sub item 3</li>
                                <li>sub item 4</li>
                                <li>sub item 5</li>
                                <li>sub item 6</li>
                                <li>sub item 7</li>
                        </ul>
                </li>
                <li>item 5
                        <ul>
                                <li>sub item 1</li>
                                <li>sub item 2</li>
                                <li>sub item 3</li>
                                <li>sub item 4</li>
                                <li>sub item 5</li>
                                <li>sub item 6</li>
                                <li>sub item 7</li>
                        </ul>
                </li>
                <li>item 6
                        <ul>
                                <li>sub item 1</li>
                                <li>sub item 2</li>
                                <li>sub item 3</li>
                                <li>sub item 4</li>
                                <li>sub item 5</li>
                                <li>sub item 6</li>
                                <li>sub item 7</li>
                        </ul>
                </li>
                <li>item 7
                        <ul>
                                <li>sub item 1</li>
                                <li>sub item 2</li>
                                <li>sub item 3</li>
                                <li>sub item 4</li>
                                <li>sub item 5</li>
                                <li>sub item 6</li>
                                <li>sub item 7</li>
                        </ul>
                </li>
        </ul>
</div>
<ul>unordered list
                <li>item 1</li>
                <li>item 2</li>
                <li>item 3</li>
                <li>item 4</li>
                <li>item 5</li>
                <li>item 6</li>
                <li>item 7</li>
</ul>
<ul>unordered list - nested children
<ul>unordered list - nested children
        <li>item 1
                <ul>
                        <li>sub item 1</li>
                        <li>sub item 2</li>
                        <li>sub item 3</li>
                        <li>sub item 4</li>
                        <li>sub item 5</li>
                        <li>sub item 6</li>
                        <li>sub item 7</li>
                </ul>
        </li>
        <li>item 2
                <ul>
                        <li>sub item 1</li>
                        <li>sub item 2</li>
                        <li>sub item 3</li>
                        <li>sub item 4</li>
                        <li>sub item 5</li>
                        <li>sub item 6</li>
                        <li>sub item 7</li>
                </ul>
        </li>
        <li>item 3
                <ul>
                        <li>sub item 1</li>
                        <li>sub item 2</li>
                        <li>sub item 3</li>
                        <li>sub item 4</li>
                        <li>sub item 5</li>
                        <li>sub item 6</li>
                        <li>sub item 7</li>
                </ul>
        </li>
        <li>item 4
                <ul>
                        <li>sub item 1</li>
                        <li>sub item 2</li>
                        <li>sub item 3</li>
                        <li>sub item 4</li>
                        <li>sub item 5</li>
                        <li>sub item 6</li>
                        <li>sub item 7</li>
                </ul>
        </li>
        <li>item 5
                <ul>
                        <li>sub item 1</li>
                        <li>sub item 2</li>
                        <li>sub item 3</li>
                        <li>sub item 4</li>
                        <li>sub item 5</li>
                        <li>sub item 6</li>
                        <li>sub item 7</li>
                </ul>
        </li>
        <li>item 6
                <ul>
                        <li>sub item 1</li>
                        <li>sub item 2</li>
                        <li>sub item 3</li>
                        <li>sub item 4</li>
                        <li>sub item 5</li>
                        <li>sub item 6</li>
                        <li>sub item 7</li>
                </ul>
        </li>
        <li>item 7
                <ul>
                        <li>sub item 1</li>
                        <li>sub item 2</li>
                        <li>sub item 3</li>
                        <li>sub item 4</li>
                        <li>sub item 5</li>
                        <li>sub item 6</li>
                        <li>sub item 7</li>
                </ul>
        </li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Test runner

Ready to run.

Testing in
Test		Ops/sec
specifying child selector using ">" and ":nth-child"	`var x = $("#ul1 > li:nth-child(4)");`	ready
specifying child selector using ">" and "eq"	`var x = $("#ul1 > li:eq(3)");`	ready
specifying child selector using ">" , and using element array index and rewrapping into jQuery	`var x = $($("#ul1 > li")[3])`	ready
using eq method chained to > operator (descendant)	`var x = $("#ul1 > li").eq(3)`	ready
using children() method, then specifying child selector, using element selector and "eq"	`var x = $("#ul1").children("li:eq(3)");`	ready
chaining filter method with li:eq pseudo-selector to children method	`var x = $("#ul1").children().filter("li:eq(3)");`	ready
chaining filter method with li:nth-child pseudo-selector to children method	`var x = $("#ul1").children().filter("li:nth-child(4)");`	ready
using parent child selector and eq method	`var x = $("#ul1 li").eq(3);`	ready
passing index of element from children method with selector back into jQuery	`var x = $($("#ul1").children("li")[3]);`	ready
chaining eq method to children method with selector	`var x = $("#ul1").children("li").eq(3);`	ready

Revisions

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

Revision 1: published on March 13, 2011
Revision 2: published on August 5, 2011
Revision 3: published on July 7, 2012
Revision 4: published on July 10, 2012