How to recursively search all parentNodes

I want to know, how to find out recursively all parent nodes of an element. Suppose i have following snippet

<a href="#"><font>Hello开发者_如何学运维</font></a>

In this I would like to find out whether font tag's parent node is an anchor tag or not. Now this can be achieved by simply checking .parentNode property. But what if there are following cases like,

<a href="#"><font><b>Hello<b></font></a>

or

<a href="#"><font><b><u>Hello</u><b></font></a>

So, basically, how to know if we have reached the top most parent node ?

You can traverse from an element up to the root looking for the desired tag:

function findUpTag(el, tag) {
    while (el.parentNode) {
        el = el.parentNode;
        if (el.tagName === tag)
            return el;
    }
    return null;
}

You call this method with your start element:

var el = document.getElementById("...");  // start element
var a = findUpTag(el, "A");   // search <a ...>
if (a) console.log(a.id);

The following recursive function will return an ascending ordered array, with all the parents nodes for the provided DOM element, until BODY node is reached.

function parents(element, _array) {
    if(_array === undefined) _array = []; // initial call
    else _array.push(element); // add current element
    // do recursion until BODY is reached
    if(element.tagName !== 'BODY' ) return parents(element.parentNode, _array);
    else return _array;
}

Usage :

var parentsArray = parents( document.getElementById("myDiv") );

You can use jQuery closest() method to get the closest ahref:

$("#your-element").closest("a").css("color", "red");

Or you can have a look at the parentsUntil method:

$("#your-element").parentsUntil("#yourWrapper", "a").first().css("color", "red");

Try it out here: http://www.lunarailways.com/demos/parents.html

I been working on similar thing. Trying to close a div if user clicks outside the div. It needs to loop through all its parent nodes.

have a look at this: http://jsfiddle.net/aamir/y7mEY/

Here's a shorter one:

function parentByTag(el, tag) {
    if(!el || el.tagName == tag) {
        return el
    } else {
        return parentByTag(el.parentElement, tag)
    }
}

Returns undefined if not found.