jQuery Closest

Benchmark created by Stephen Cronin on March 4, 2016

Preparation HTML

<div class="poopie">
  <span>
    <span id="test"></span>
  </span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Setup

var test = document.getElementById("test");
    var $test = $("#test");
    
    var Closest = function (elem, selector) {

    var firstChar = selector.charAt(0);

    // Get closest match
    for ( ; elem && elem !== document; elem = elem.parentNode ) {

        // If selector is a class
        if ( firstChar === '.' ) {
            if ( elem.classList.contains( selector.substr(1) ) ) {
                return elem;
            }
        }

        // If selector is an ID
        if ( firstChar === '#' ) {
            if ( elem.id === selector.substr(1) ) {
                return elem;
            }
        } 

        // If selector is a data attribute
        if ( firstChar === '[' ) {
            if ( elem.hasAttribute( selector.substr(1, selector.length - 2) ) ) {
                return elem;
            }
        }

        // If selector is a tag
        if ( elem.tagName.toLowerCase() === selector ) {
            return elem;
        }

    }

    return false;

};

Test runner

var target = $test.closest(".poopie");

var target = Closest(test, ".poopie");

Revisions

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

• Revision 1: published by Stephen Cronin on March 4, 2016