Cloest Data polyfill

Recursive polyfill the data attribute of the closest ancestor with that data attribute.

by Julien Etienne

HTML

<div data-test='5'>
    <div data-test='4'>
        <div data-testTYPOOO='3'>
            <div data-testwe='2'>
                <div data-var='1'> <span></span>

                </div>
            </div>
        </div>
    </div>
</div>

JavaScript

var span = document.getElementsByTagName('span')[0];

function closestData(element, dataAttribute) {
    var parentElement = element.parentNode,
        parentData = parentElement.dataset[dataAttribute] || parentElement.getAttribute('data-' + dataAttribute),
        body = document.body || document.getElementsByTagName('body');

    if (parentElement === body || !parentElement) {
        return;
    }

    if (!parentData) {
        closestData(parentElement, dataAttribute);
    } else {
        this.results = parentData;
    }
    return this.results;
}

console.log('Results', closestData(span, 'test'));