JSFiddle - React, Tailwind, and code Playground

by Couto

HTML

<ul class="one">
    <li>Level 01 / 01</li>
    <li>
        <ul class="target">
            <li>
                <div class="foo">
                    I'm foo
                </div>
            </li>
        </ul>
    </li>
</ul>

JavaScript

Element.implement({
    closest: function(el) {
        var find = this.getElement(el),
            self = this;
                
        while (self && !find) {
            self = self.getParent();
            find = self ? self.getElement(el) : null;
            if (find) return find;
        }
        
        return find;
    }
});



Element.implement({
    closest2: function (selector) {
        var find = document.body.getElement(selector),
            current = this;
        
        while (find !== current) {
            current = current.getParent();
        }
        
        return current;
    }
})


var el = document.getElement('.foo');
console.time('despiste');
var ul = el.closest('ul');
console.timeEnd('despiste');

console.log('----------------------------------------------');


console.time('closest');
var ul = el.closest('ul');
console.timeEnd('closest');

console.time('closest2');
var ul = el.closest('ul');
console.timeEnd('closest2');


console.log(ul);