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 (v2)

Revision 2 of this benchmark created on August 5, 2011

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
                        <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>
                </li>
                <li>item 2
                        <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>
                </li>
                <li>item 3
                        <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>
                </li>
                <li>item 4
                        <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>
                </li>
                <li>item 5
                        <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>
                </li>
                <li>item 6
                        <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>
                </li>
                <li>item 7
                        <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>
                </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
                        <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>
                </li>
                <li>item 2
                        <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>
                </li>
                <li>item 3
                        <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>
                </li>
                <li>item 4
                        <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>
                </li>
                <li>item 5
                        <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>
                </li>
                <li>item 6
                        <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>
                </li>
                <li>item 7
                        <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>
                </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
                        <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>
                </li>
                <li>item 2
                        <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>
                </li>
                <li>item 3
                        <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>
                </li>
                <li>item 4
                        <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>
                </li>
                <li>item 5
                        <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>
                </li>
                <li>item 6
                        <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>
                </li>
                <li>item 7
                        <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>
                </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
        <li>item 1
                <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>
        </li>
        <li>item 2
                <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>
        </li>
        <li>item 3
                <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>
        </li>
        <li>item 4
                <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>
        </li>
        <li>item 5
                <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>
        </li>
        <li>item 6
                <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>
        </li>
        <li>item 7
                <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>
        </li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Test runner

Ready to run.

Testing in
Test		Ops/sec
specifying child selector using > in selector, :nth-child	`$("#ul1 > li:nth-child(4)");`	ready
specifying child selector using > in selector, eq	`$("#ul1 > li:eq(3)");`	ready
specifying child selector using > in selector, using element index and rewrapping into jQuery	`$($("#ul1 > li")[4])`	ready
not specifying child selector, :nth-child	`$("#ul1:nth-child(4)")`	ready
using children() method, then specifying child selector, using eq	`$("#ul1").children("li:eq(3)");`	ready
using children() method, not specifying child selector, using eq	`$("#ul1").children("eq(3)");`	ready
using children() method, not specifying child selector, using index and rewrapping into jQuery	`$($("#ul1").children()[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