jQuery iterate over numbered IDs vs class selector (v4)

Revision 4 of this benchmark created on

Preparation HTML

<ul>
    <li id="item-0" class="item">Item 0</li>
    <li id="item-1" class="item">Item 1</li>
    <li id="item-2" class="item">Item 2</li>
    <li id="item-3" class="item">Item 3</li>
    <li id="item-4" class="item">Item 4</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery class selector
var $items = $('.item');
ready
iteration and selection with $.fn.add(selector)
var $items    = $(),
    baseId    = "#item-";

for (var count = 0; ; count++) {
    $items = $items.add(baseId + count);
    if ($items.length == count) break;
}
ready
iteration and selection with getElementById()
var items  = [],
    baseId = "item-",
    item   = null;

for (var count = 0; ; count++) {
    item = document.getElementById(baseId + count);
    if (item === null) {
        break;
    } else {
        items[items.length] = item;
    }
}

var $items = $(items);
ready
querySelectorAll()
var items  = document.querySelectorAll('.item'),
    $items = $(items);
ready
getElementsByClassName()
var items  = document.getElementsByClassName('item'),
    $items = $(items);
ready
jQuery find selector
var $items = $.find('.item');
ready

Revisions

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