javascript - ¿Cómo hago este bucle recursivamente a todos los niños?

recursion loops

Question

Tengo los siguientes

for (var i = 0; i < children.length; i++){
   if(hasClass(children[i], "lbExclude")){
       children[i].parentNode.removeChild(children[i]);
   }
};

Me gustaría recorrer todos los hijos de los niños, etc. (no solo el nivel superior). Encontré esta línea, que parece hacer eso:

for(var m = n.firstChild; m != null; m = m.nextSibling) {

¿Pero no tengo claro cómo me refiero al niño actual si hago ese cambio? Ya no tendría que aclarar la posición del índice del niño. ¿Alguna sugerencia?

¡Gracias!

Actualizar:

Ahora estoy usando lo siguiente, de acuerdo con las sugerencias de respuesta. ¿Es esta la forma correcta / más eficiente de hacerlo?

function removeTest(child) {
  if (hasClass(child, "lbExclude")) {
    child.parentNode.removeChild(child);
  }
}

function allDescendants(node) {
  for (var i = 0; i < node.childNodes.length; i++) {
    var child = node.childNodes[i];
    allDescendants(child);
    removeTest(child);
  }
}

var children = temp.childNodes;
for (var i = 0; i < children.length; i++) {
  allDescendants(children[i]);
};

Answer 1

La forma más clara de hacerlo en navegadores modernos o con babel es esta. Supongamos que tiene un nodo HTML $node cuyos hijos desea recuperar.

Array.prototype.forEach.call($node.querySelectorAll("*"), function(node) {
  doSomethingWith(node);
});

El querySelectorAll(''*'') en cualquier nodo DOM le daría todos los nodos secundarios del elemento en una NodeList . NodeList es un objeto similar a una matriz, por lo que puede usar Array.prototype.forEach.call para iterar sobre esta lista, procesando cada hijo uno por uno dentro de la devolución de llamada.

Answer 2

No hay necesidad de llamar al método ''allDescendants'' en todos los hijos, porque el método en sí ya lo hace. Así que elimine el último bloque de código y creo que es una solución adecuada (á, no thé =])

            function removeTest(child){     
                if(hasClass(child, "lbExclude")){
                    child.parentNode.removeChild(child);
                }
            }

            function allDescendants (node) {
                for (var i = 0; i < node.childNodes.length; i++) {
                  var child = node.childNodes[i];
                  allDescendants(child);
                  removeTest(child);
                }
            }           

            var children = allDescendants(temp);

Answer 3

Normalmente tendrías una función que podría llamarse recursivamente en todos los nodos. Realmente depende de lo que quieras hacer con los niños. Si simplemente desea reunir a todos los descendientes, element.getElementsByTagName puede ser una mejor opción.

var all = node.getElementsByTagName(''*'');

for (var i = -1, l = all.length; ++i < l;) {
    removeTest(all[i]);
}

Answer 4

Puedes usar BFS para encontrar todos los elementos.

function(element) {
    // [].slice.call() - HTMLCollection to Array
    var children = [].slice.call(element.children), found = 0;
    while (children.length > found) {
        children = children.concat([].slice.call(children[found].children));
        found++;
    }
    return children;
};

Esta función devuelve a todos los hijos de los hijos del elemento.

Answer 5

Si tiene jQuery y desea obtener todos los elementos descendientes, puede utilizar:

 var all_children= $(parent_element).find(''*'');

Solo tenga en cuenta que all_children es una colección HTML y no una matriz. Se comportan de manera similar cuando estás haciendo un bucle, pero la colección no tiene muchos de los métodos de Array.prototype útiles que de otro modo podrías disfrutar.

Answer 6

Si usas una biblioteca js es tan simple como esto:

$(''.lbExclude'').remove();

De lo contrario, si desea adquirir todos los elementos en un nodo, puede recopilarlos todos de forma nativa:

var nodes = node.getElementsByTagName(''*'');
for (var i = 0; i < nodes.length; i++) {
  var n = nodes[i];
  if (hasClass(n, ''lbExclude'')) {
    node.parentNode.removeChild(node);
  }
}

Answer 7

function allDescendants (node) {
    for (var i = 0; i < node.childNodes.length; i++) {
      var child = node.childNodes[i];
      allDescendants(child);
      doSomethingToNode(child);
    }
}

Repasas todos los elementos secundarios y, para cada elemento, llamas a la misma función y haces que pase sobre los elementos secundarios de ese elemento.