jQuery .closest( '.class' ) vs custom closestByClassName( 'class' ) (v5)

Revision 5 of this benchmark created on

Preparation HTML

<section>
<div><div><div><div><div id="end" class="end"><div><div><div><div><div><div><div><div>
<article>
<p>
<span id="start" class="start"></span>
</p>
</article>
</div></div></div></div></div></div></div></div></div></div></div></div></div>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Setup

if (!Array.prototype.indexOf) {
      Array.prototype.indexOf = function(obj, start) {
        for (var i = (start || 0), j = this.length; i < j; i++) {
          if (this[i] === obj) {
            return i;
          }
        }
        return -1;
      }
    }
    
    var startJQ = $('#start'),
      startDOM = $('#start')[0];
    
    Element.prototype.closestByClassName = function(className) {
    
      return this.className && this.className.split(' ').indexOf(className) > -1 ? this : (this.parentNode.closestByClassName && this.parentNode.closestByClassName(className));
    
    };

Test runner

Ready to run.

Testing in
TestOps/sec
closest( '.class' )
var element = startJQ.closest('.start'),
  element = startJQ.closest('.end'),
  element = startJQ.closest('.not-found');
ready
custom closestByClassName
var element = startDOM.closestByClassName('start'),
  element = startDOM.closestByClassName('end'),
  element = startDOM.closestByClassName('not-found');
ready

Revisions

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