如何循环嵌套子结构？

Question

当我们不知道括号的深度时，我正在寻找一般的解决方案。然而，例如：

<div id="parent">
 <div id="parent_child">
  <div id="parent_child_child">
   <div id="parent_child_child_child">
   </div>
  </div>
 </div>
</div>

如何在vanilla JavaScript中循环使用这样的结构？

Answer 1

如果jQuery是一个选项，您可以使用descendant selector查找所有子节点（在任何深度），然后使用.each迭代它们。

$("#parent div").each(function(){
   //your code goes here
});

纯JavaScript解决方案将是。

Array.from(document.querySelectorAll("#parent div")).forEach(function(itm){
    console.log(itm); //itm represents the individual element.
});

• document.querySelectorAll()会抓住基于的元素 提供选择器。
• Array.from会将节点列表转换为本机数组。
• forEach在迭代数组时会很方便。