it-swarm.dev

Как сделать этот цикл рекурсивным для всех детей?

У меня есть следующее:

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

Я хотел бы, чтобы он прошел через всех детей детей и т.д. (Не только на верхнем уровне). Я нашел эту строку, которая, кажется, делает это:

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

Но мне неясно, как я отношусь к текущему ребенку, если я сделаю это переключение? У меня больше не было бы возможности уточнить индекс позиции ребенка. Какие-либо предложения?

Спасибо!

Обновление:

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

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]);
};
23
Matrym

Обычно у вас есть функция, которую можно вызывать рекурсивно на всех узлах. Это действительно зависит от того, что вы хотите сделать с детьми. Если вы просто хотите собрать всех потомков, то element.getElementsByTagName может быть лучшим вариантом.

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

for (var i = -1, l = all.length; ++i < l;) {
    removeTest(all[i]);
}
28
James
function allDescendants (node) {
    for (var i = 0; i < node.childNodes.length; i++) {
      var child = node.childNodes[i];
      allDescendants(child);
      doSomethingToNode(child);
    }
}

Вы перебираете все дочерние элементы, и для каждого элемента вы вызываете одну и ту же функцию, и она зацикливается на дочерних элементах этого элемента.

40
Quentin

Нет необходимости вызывать метод 'allDescendants' для всех дочерних элементов, потому что сам метод уже делает это. Поэтому удалите последний кодовый блок, и я думаю, что это правильное решение (а не =)

            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);
3
Robbert van den Bogerd

если элементы создаются в цикле, вы должны оставить индекс через id = "" data-name или что-то еще. Затем вы можете индексировать их напрямую, что будет быстрее для большинства функций, таких как (! -F). Хорошо работает для 1024 бит х 100 элементов в зависимости от того, что вы делаете.

if ( document.getElementById( cid ) ) {
 return;
} else {
  what you actually want
}

это будет быстрее в большинстве случаев, когда элементы уже загружены. только почистите страницу при перезагрузке или безопасных передачах доменов/логинах/cors, и вы делаете что-то дважды.

1
user10794722

Вы можете использовать BFS, чтобы найти все элементы.

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

Эта функция возвращает всех дочерних дочерних элементов элемента.

1
androbin

Если у вас есть jquery и вы хотите получить все элементы-потомки, вы можете использовать:

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

Просто помните, что all_children - это коллекция HTML, а не массив. Они ведут себя аналогично, когда вы просто зацикливаетесь, но коллекция не имеет много полезных методов Array.prototype, которые вы могли бы в противном случае использовать. 

1
Luke

Самый ясный способ сделать это в современных браузерах или с Babel - это. Скажем, у вас есть HTML-узел $node, чьи дети вы хотите сохранить.

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

Функция querySelectorAll('*') на любом узле DOM выдаст вам все дочерние узлы элемента в переменной NodeList. NodeList является объектом, похожим на массив, поэтому вы можете использовать Array.prototype.forEach.call для итерации по этому списку, обрабатывая каждого потомка один за другим в обратном вызове.

0
kumar_harsh

Если вы используете библиотеку js, это так просто:

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

В противном случае, если вы хотите получить все элементы в узле, вы можете собрать их все изначально:

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