Run results for: jQuery class selector

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36

Browser: Chrome 52

Operating system: Windows

Device Platform: Other

Date tested: 7 years ago

Test name	Executions per second
Id and class chaining selector	108490.9 Ops/sec
Class selector only	562638.4 Ops/sec
Id selector then .find	423420.4 Ops/sec

HTML Preparation code:

<div id='curBody1'>
  <div>
    <span>
      <div>
        This is a div we're NOT looking for.
      </div>
    </span>
  </div>
</div>
<div id='curBody2'>
  <div>
    <span>
      <div class='desired-element'>
        This is the div we're looking for.
      </div>
    </span>
  </div>
</div>

Script Preparation code:

var curElement = null;

Tests:

Id and class chaining selector
curElement = $('#curBody2 .desired-element');
Class selector only
curElement = $('.desired-element');
Id selector then .find
curElement = $('#curBody2').find('.desired-element');

Run results for: jQuery class selector

This will test the difference between selecting an element using its class vs getting a handle on the parent element and then navigating to the child.

Id and class chaining selector

Class selector only

Id selector then .find