jQuery .closest( '#id' ) vs DOM Element.closestById( 'id' ) (v2)

Revision 2 of this benchmark created by ThinkingStiff on November 24, 2011

Preparation HTML

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

Setup

var startJQ = $( '#start' ),
        startDOM = document.getElementById( 'start' );
    
    Element.prototype.closestById = function( id ) {
       
        if( this.parentNode.nodeType == Node.ELEMENT_NODE ) {        
            
            return this.getAttribute( 'id' ) == id 
                ? this 
                : this.parentNode.closestById( id );
            
        };
        
    };

Test runner

var jq1 = startJQ.closest( '#end' ),
    jq2 = startJQ.closest( '#not-found' );
 

var dom1 = startDOM.closestById( 'end' ),
    dom2 = startDOM.closestById( 'not-found' );
 

Revisions

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

• Revision 1: published by ThinkingStiff on October 23, 2011
• Revision 2: published by ThinkingStiff on November 24, 2011
• Revision 3: published by ThinkingStiff on November 24, 2011