nth child element using jQuery

JavaScript performance comparison

Revision 4 of this test case created

Info

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 code

<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>

Preparation code output

    unordered list
  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  • item 6
  • item 7
    unordered list - nested children
  • item 1
    • sub item 1
    • sub item 2
    • sub item 3
    • sub item 4
    • sub item 5
    • sub item 6
    • sub item 7
  • item 2
    • sub item 1
    • sub item 2
    • sub item 3
    • sub item 4
    • sub item 5
    • sub item 6
    • sub item 7
  • item 3
    • sub item 1
    • sub item 2
    • sub item 3
    • sub item 4
    • sub item 5
    • sub item 6
    • sub item 7
  • item 4
    • sub item 1
    • sub item 2
    • sub item 3
    • sub item 4
    • sub item 5
    • sub item 6
    • sub item 7
  • item 5
    • sub item 1
    • sub item 2
    • sub item 3
    • sub item 4
    • sub item 5
    • sub item 6
    • sub item 7
  • item 6
    • sub item 1
    • sub item 2
    • sub item 3
    • sub item 4
    • sub item 5
    • sub item 6
    • sub item 7
  • item 7
    • sub item 1
    • sub item 2
    • sub item 3
    • sub item 4
    • sub item 5
    • sub item 6
    • sub item 7
    unordered list
  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  • item 6
  • item 7
    unordered list - nested children
  • item 1
    • sub item 1
    • sub item 2
    • sub item 3
    • sub item 4
    • sub item 5
    • sub item 6
    • sub item 7
  • item 2
    • sub item 1
    • sub item 2
    • sub item 3
    • sub item 4
    • sub item 5
    • sub item 6
    • sub item 7
  • item 3
    • sub item 1
    • sub item 2
    • sub item 3
    • sub item 4
    • sub item 5
    • sub item 6
    • sub item 7
  • item 4
    • sub item 1
    • sub item 2
    • sub item 3
    • sub item 4
    • sub item 5
    • sub item 6
    • sub item 7
  • item 5
    • sub item 1
    • sub item 2
    • sub item 3
    • sub item 4
    • sub item 5
    • sub item 6
    • sub item 7
  • item 6
    • sub item 1
    • sub item 2
    • sub item 3
    • sub item 4
    • sub item 5
    • sub item 6
    • sub item 7
  • item 7
    • sub item 1
    • sub item 2
    • sub item 3
    • sub item 4
    • sub item 5
    • sub item 6
    • sub item 7
    unordered list
  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  • item 6
  • item 7
    unordered list - nested children
  • item 1
    • sub item 1
    • sub item 2
    • sub item 3
    • sub item 4
    • sub item 5
    • sub item 6
    • sub item 7
  • item 2
    • sub item 1
    • sub item 2
    • sub item 3
    • sub item 4
    • sub item 5
    • sub item 6
    • sub item 7
  • item 3
    • sub item 1
    • sub item 2
    • sub item 3
    • sub item 4
    • sub item 5
    • sub item 6
    • sub item 7
  • item 4
    • sub item 1
    • sub item 2
    • sub item 3
    • sub item 4
    • sub item 5
    • sub item 6
    • sub item 7
  • item 5
    • sub item 1
    • sub item 2
    • sub item 3
    • sub item 4
    • sub item 5
    • sub item 6
    • sub item 7
  • item 6
    • sub item 1
    • sub item 2
    • sub item 3
    • sub item 4
    • sub item 5
    • sub item 6
    • sub item 7
  • item 7
    • sub item 1
    • sub item 2
    • sub item 3
    • sub item 4
    • sub item 5
    • sub item 6
    • sub item 7
    unordered list
  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  • item 6
  • item 7
    unordered list - nested children
      unordered list - nested children
    • item 1
      • sub item 1
      • sub item 2
      • sub item 3
      • sub item 4
      • sub item 5
      • sub item 6
      • sub item 7
    • item 2
      • sub item 1
      • sub item 2
      • sub item 3
      • sub item 4
      • sub item 5
      • sub item 6
      • sub item 7
    • item 3
      • sub item 1
      • sub item 2
      • sub item 3
      • sub item 4
      • sub item 5
      • sub item 6
      • sub item 7
    • item 4
      • sub item 1
      • sub item 2
      • sub item 3
      • sub item 4
      • sub item 5
      • sub item 6
      • sub item 7
    • item 5
      • sub item 1
      • sub item 2
      • sub item 3
      • sub item 4
      • sub item 5
      • sub item 6
      • sub item 7
    • item 6
      • sub item 1
      • sub item 2
      • sub item 3
      • sub item 4
      • sub item 5
      • sub item 6
      • sub item 7
    • item 7
      • sub item 1
      • sub item 2
      • sub item 3
      • sub item 4
      • sub item 5
      • sub item 6
      • sub item 7

Test runner

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

Java applet disabled.

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

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:

0 comments

Add a comment