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

Revision 2 of this benchmark created by eternal on

Description

Test for IE8/IE7/IE6 (browsers that don't support HTML 5 tags)

Preparation HTML

<div id="section">
 <div>
  <div>
   <div>
    <div>
     <div id="end" class="end">
      <div>
       <div>
        <div>
         <div>
          <div>
           <div>
            <div>
             <div>
              <div id="article">
               <p>
                <span id="start" class="start"></span>
               </p>
              </div>
             </div>
            </div>
           </div>
          </div>
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>

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

Setup

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.