Как рекурсивно искать все parentNodes

Я хочу знать, как найти рекурсивно все родительские узлы элемента. Предположим, что у меня есть следующий фрагмент

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

В этом я хотел бы узнать, является ли тег parent parent node тегом привязки или нет. Теперь это может быть достигнуто просто проверкой свойства .parentNode. Но что, если есть следующие случаи, такие как

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

или

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

Итак, в основном, как узнать, достиг ли мы самого верхнего родителя node?

Ответы

Ответ 1

Вы можете перемещаться от элемента до корня, ища желаемый тег:

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

Вы вызываете этот метод с помощью элемента start:

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

Ответ 2

Следующая рекурсивная функция вернет возрастающий упорядоченный массив, со всеми родительскими узлами для предоставленного элемента DOM, , пока не будет достигнут BODY node.

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;
}

Использование:

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

Ответ 3

Я работал над подобным. Попытка закрыть div, если пользователь щелкает за пределами div. Он должен пересекать все его родительские узлы.

взгляните на это: http://jsfiddle.net/aamir/y7mEY/

Ответ 4

Вы можете использовать метод jQuery closeest() для получения ближайшего ahref:

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

Или вы можете взглянуть на метод parentsUntil:

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

Попробуйте здесь: http://www.lunarailways.com/demos/parents.html