javascript - JS : How to automate going up "parentNode" as many times as needed

Question

假设我有一个名为 Z 的 div。Z 是一个 sub-sub-sub... div 的子级calledB它是一个divcalledA` 的 child 。

从B到Z的所有 block 都设置为display=none(A可见)。

如果我单击链接到 block Z 的 anchor ，我希望显示它。

为此，我需要设置 block Zblock 的显示，还有它的父级显示*要阻塞，它的父级一直到 block B....

我不想“硬”编码所有可能的级别，因为我可以有 2、4 或 10 个级别。所以我想找到一种自动完成的方法。

我稍微简化了上面的示例，因为我必须每 2 个“世代”设置一次 display=block(参见我的代码中的 parentNode.parentNode)

到目前为止，这是我的代码(在兔子洞里有 2 级!)而不是自动化:

function indexLink(link_to_anchor) {
    var x = document.getElementById(link_to_anchor);
    if (x.parentNode.parentNode.getAttribute("class") == "divcodebox") {
        if (x.parentNode.parentNode.parentNode.parentNode.getAttribute("class") == "divcodebox") {
            x.parentNode.parentNode.parentNode.parentNode.style.display = "block";
        }
        x.parentNode.parentNode.style.display = "block";
    }
    x.style.display = "block";
}

---

递归地使用 indexLink() :

function indexLink(link_to_anchor) {
    var x = document.getElementById(link_to_anchor);
    x.style.display = "block";
    if (x.parentNode.parentNode.getAttribute("class") == "divcodebox") {
        x.parentNode.parentNode.style.display = "block";
        indexLink(x)
    }
}

Answer 1

一个简单的 for 循环怎么样？

    var x = document.getElementById(link_to_anchor);
    for (parent = x.parentNode; parent; parent = parent.parentNode) {
      // do whatever
    }

你当然可以保留一个计数器来检查你已经遍历了多少步等。 document 级别的 .parentNode 引用将为 null ，这样就结束了迭代。 (您也可以尽早跳出循环。)