javascript - recursividad - Cómo buscar recursivamente todos los nodos primarios

recursividad javascript

Question

Quiero saber cómo encontrar recursivamente todos los nodos principales de un elemento. Supongamos que tengo un fragmento siguiente

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

En esto me gustaría saber si el nodo primario de la etiqueta de fuente es una etiqueta de anclaje o no. Ahora esto se puede lograr simplemente marcando la propiedad .parentNode. Pero ¿y si hay siguientes casos como,

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

o

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

Entonces, básicamente, ¿cómo saber si hemos llegado al nodo superior más superior?

Answer 1

He estado trabajando en algo similar. Intentando cerrar un div si el usuario hace clic fuera del div. Necesita recorrer todos sus nodos primarios.

Eche un vistazo a esto: http://jsfiddle.net/aamir/y7mEY/

Answer 2

La siguiente función recursiva devolverá una matriz ordenada ascendente , con todos los nodos principales para el elemento DOM proporcionado, hasta que se alcance el nodo BODY .

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

Uso

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

Answer 3

Puede atravesar desde un elemento hasta la raíz buscando la etiqueta deseada:

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

Usted llama a este método con su elemento de inicio:

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

Answer 4

Puedes usar el método más cercano jQuery () para obtener el ahref más cercano:

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

O puedes echar un vistazo al método parentsUntil :

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

Pruébelo aquí: http://www.lunarailways.com/demos/parents.html