jQuery vs. semi-jQuery multiple ID selector (v5)

Revision 5 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="a">
  <p id="b">
    <span id="c">
      lorem ipsum
    </span>
    <strong id="d">
      dolor sit amet
    </strong>
  </p>
</div>
<div id="e">
  hello world
</div>

Setup

function getId(id) {
      return document.getElementById(id);
    }
    
    function id$(id) {
      var rgx = /,\s*/g;
      if ( !! ~id.search(rgx)) {
        id = id.split(rgx);
        var ids = [],
            i = 0,
            len = id.length;
        while (i < len) {
          ids.push(getId(id[i]));
          i++
        }
        return $(ids)
      } else {
        return $(getId(id))
      }
    }

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery (single)
$("#a").addClass('test');
$("#b").addClass('test');
$("#c").addClass('test');
$("#d").addClass('test');
$("#e").addClass('test');
ready
Native with jQuery (single)
id$("a").addClass('test');
id$("b").addClass('test');
id$("c").addClass('test');
id$("d").addClass('test');
id$("e").addClass('test');
ready
jQuery (many)
$("#a, #b, #c, #d, #e").addClass('test')
ready
Native with jQuery (many)
id$("a, b, c, d, e").addClass('test')
ready
Native QSA
var Elms = document.querySelectorAll ("#a, #b, #c, #d, #e");

for (var n = 0, nl = Elms.length; n < nl; n++) {
  Elms[n].className += (Elms[n].className.className ? ' ' : '') + 'test';
}
ready
Native getElementById
var ids = ['a', 'b', 'c', 'd', 'e'];
var El;

for (var n = 0, nl = ids.length; n < nl; n++) {
  El = document.getElementById (ids[n]);
  El.className += (El.className.className ? ' ' : '') + 'test';
}
ready
Native + JQuery
$(document.querySelectorAll("#a, #b, #c, #d, #e")).addClass('test');
ready

Revisions

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