jquery class selector versus id selector

Benchmark created by khmer on October 12, 2011

Description

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<form action="derp" method="get" accept-charset="utf-8">
    <input type="checkbox" name="derp" value="0" class="x x1" id="x-1">
    <input type="checkbox" name="derp" value="0" class="x x2" id="x-2">
    <input type="checkbox" name="derp" value="0" class="x x3" id="x-3">
    <input type="checkbox" name="derp" value="0" class="x x4" id="x-4">
    <input type="checkbox" name="derp" value="0" class="x x5" id="x-5">
    <input type="checkbox" name="derp" value="0" class="x x6" id="x-6">
    <input type="checkbox" name="derp" value="0" class="x x7" id="x-7">
    <input type="checkbox" name="derp" value="0" class="x x8" id="x-8">
    <input type="checkbox" name="derp" value="0" class="x x9" id="x-9">
    <input type="checkbox" name="derp" value="0" class="x x10" id="x-10">
    <input type="checkbox" name="derp" value="0" class="x x11" id="x-11">
    <input type="checkbox" name="derp" value="0" class="x x12" id="x-12">
    <input type="checkbox" name="derp" value="0" class="x x13" id="x-13">
    <input type="checkbox" name="derp" value="0" class="x x14" id="x-14">
    <input type="checkbox" name="derp" value="0" class="x x15" id="x-15">
    <input type="checkbox" name="derp" value="0" class="x x16" id="x-16">
    <input type="checkbox" name="derp" value="0" class="x x17" id="x-17">
    <input type="checkbox" name="derp" value="0" class="x x18" id="x-18">
    <input type="checkbox" name="derp" value="0" class="x x19" id="x-19">
    <input type="checkbox" name="derp" value="0" class="x x20" id="x-20">
    <input type="checkbox" name="derp" value="0" class="x x21" id="x-21">
    <input type="checkbox" name="derp" value="0" class="x x22" id="x-22">
    <input type="checkbox" name="derp" value="0" class="x x23" id="x-23">
    <input type="checkbox" name="derp" value="0" class="x x24" id="x-24">
    <input type="checkbox" name="derp" value="0" class="x x25" id="x-25">
    <input type="checkbox" name="derp" value="0" class="x x26" id="x-26">
    <input type="checkbox" name="derp" value="0" class="x x27" id="x-27">
    <input type="checkbox" name="derp" value="0" class="x x28" id="x-28">
    <input type="checkbox" name="derp" value="0" class="x x29" id="x-29">
    <input type="checkbox" name="derp" value="0" class="x x30" id="x-30">
</form>

Test runner

$.each(new Array(30),function(i){
  $('.x.x' + (i+1))
});

$.each(new Array(30),function(i){
  $('#x-' + (i+1))
});

Revisions

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

• Revision 1: published by khmer on October 12, 2011