Javascript JS：如何自动上楼；“父节点”；需要多少次就多少次

假设我有一个

div

叫做Z

Z

，它是一个sub-sub-sub-sub。。。被调用的

div

的子级

B

，它是被调用的

a`div

的子级

从
B
到
Z
的所有块都设置为
display=none
（
A
可见）

如果我单击链接到块
Z
的锚点，我希望它显示出来

为此，我需要设置块Z
block
的显示，但也需要将其父级的显示*设置为block，并将其父级一直设置为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)
    }
}

一个简单的
for
循环怎么样

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

当然，您可以保留一个计数器来检查您已经遍历了多少步，等等。来自
文档
级别的
.parentNode
引用将为
null
，从而结束迭代。（您也可以提前打破循环。）

然后像这样使用它：

var a = document.getElementById("1");
var b = document.getElementById("2");

recursiveApply(a, b, function(element) {
    // do stuff with the element
    console.log(element)
});

这只是为了根据您的代码显示递归函数的外观，而不是一个完整的示例

;function indexLink(element){
    //REM: Change the parameter to the actual element instead of its id
    //var x = document.getElementById(link_to_anchor);

    //REM: Check if the element exists and the style does not equal block
    //REM: If the styles are set by class you need to change this to computed style
    if(element && element.style.display !== 'block'){
        //REM: Set the display to block
        element.style.display = 'block';

        //REM: Repeating the same logic for the parentNode
        indexLink(element.parentNode)
    }
};

只要使用
link\u-to\u-anchor
（=x.parentNode）的父节点在其自身内调用
indexLink（）
，只要其显示不被阻止（或不被阻止，具体取决于您的方案）。@Lain，谢谢您的建议。我试过了（参见我问题底部的编辑），但是我得到了一个错误：null的'cannotreadproperty'style'。你能给我一个代码示例吗？首先，你必须传递一个元素，而不是它的
id
，除非你想保证你网站上的所有元素都确实有
id
。因此，只需传递一个HTMLElement并将
x
更改为
var x=link\u to\u anchor
。然后你调用
x.parentNode&&indexLink（x.parentNode）
而不是
indexLink（x）
。好吧，我没听清楚！谢谢我给你们举了一个小例子，让你们看看学习过程会是什么样子。谢谢@Pointy，它正在工作，但我不理解这种情况。我尝试将它与（var I=0；I<100；I++）的
关联起来{
但是我不明白中间的
父节点怎么会在第一步就停止一切。除非这个
父节点
在每个循环中都得到更新？@MagTun是的，它被循环头中的第三个子句更新：
parent=parent.parentNode
。中间的表达式将是“truthy”除非
父项
为
空
，如果迭代将其添加到
文档
级别，则为空。
;function indexLink(element){
    //REM: Change the parameter to the actual element instead of its id
    //var x = document.getElementById(link_to_anchor);

    //REM: Check if the element exists and the style does not equal block
    //REM: If the styles are set by class you need to change this to computed style
    if(element && element.style.display !== 'block'){
        //REM: Set the display to block
        element.style.display = 'block';

        //REM: Repeating the same logic for the parentNode
        indexLink(element.parentNode)
    }
};