Question

Does anybody know how I can get the equivalent of jQuery’s .offset() and .closest() without a JavaScript library?

For .closest(), if I know how far to climb up the DOM tree, I can just use that many .parentNodes, but if I don’t know how far to go, I’m stuck.

Answer 1

jQuery is javascript at its core. You can use this jQuery source viewer to find out implementation of any method.

For example, here is how closest is implemented:

closest: function( selectors, context ) {
    var ret = [], i, l, cur = this[0];

    if ( jQuery.isArray( selectors ) ) {
        var match, selector,
            matches = {},
            level = 1;

        if ( cur && selectors.length ) {
            for ( i = 0, l = selectors.length; i < l; i++ ) {
                selector = selectors[i];

                if ( !matches[selector] ) {
                    matches[selector] = jQuery.expr.match.POS.test( selector ) ? 
                        jQuery( selector, context || this.context ) :
                        selector;
                }
            }

            while ( cur && cur.ownerDocument && cur !== context ) {
                for ( selector in matches ) {
                    match = matches[selector];

                    if ( match.jquery ? match.index(cur) > -1 : jQuery(cur).is(match) ) {
                        ret.push({ selector: selector, elem: cur, level: level });
                    }
                }

                cur = cur.parentNode;
                level++;
            }
        }

        return ret;
    }

    var pos = POS.test( selectors ) ? 
        jQuery( selectors, context || this.context ) : null;

    for ( i = 0, l = this.length; i < l; i++ ) {
        cur = this[i];

        while ( cur ) {
            if ( pos ? pos.index(cur) > -1 : jQuery.find.matchesSelector(cur, selectors) ) {
                ret.push( cur );
                break;

            } else {
                cur = cur.parentNode;
                if ( !cur || !cur.ownerDocument || cur === context ) {
                    break;
                }
            }
        }
    }

    ret = ret.length > 1 ? jQuery.unique(ret) : ret;

    return this.pushStack( ret, "closest", selectors );
}

And here is the implementation of the offset:

jQuery.fn.offset = function( options ) {
    var elem = this[0], box;

    if ( options ) { 
        return this.each(function( i ) {
            jQuery.offset.setOffset( this, options, i );
        });
    }

    if ( !elem || !elem.ownerDocument ) {
        return null;
    }

    if ( elem === elem.ownerDocument.body ) {
        return jQuery.offset.bodyOffset( elem );
    }

    try {
        box = elem.getBoundingClientRect();
    } catch(e) {}

    var doc = elem.ownerDocument,
        docElem = doc.documentElement;

    // Make sure we're not dealing with a disconnected DOM node
    if ( !box || !jQuery.contains( docElem, elem ) ) {
        return box || { top: 0, left: 0 };
    }

    var body = doc.body,
        win = getWindow(doc),
        clientTop  = docElem.clientTop  || body.clientTop  || 0,
        clientLeft = docElem.clientLeft || body.clientLeft || 0,
        scrollTop  = (win.pageYOffset || jQuery.support.boxModel && docElem.scrollTop  || body.scrollTop ),
        scrollLeft = (win.pageXOffset || jQuery.support.boxModel && docElem.scrollLeft || body.scrollLeft),
        top  = box.top  + scrollTop  - clientTop,
        left = box.left + scrollLeft - clientLeft;

    return { top: top, left: left };
};