javascriptfunctionparent-node

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


Let's say I have a div that's called Z.Zthat is a sub-sub-sub... child of adivcalledBwhich is a child of adivcalledA`.

All the block from B to Z are set to display=none (A is visible).

If I click on a anchor that links to the block Z, I want it to be displayed.

For that I need to set the display of block Zblock, but also its parent's display* to block, and its parents and all the way up to block B....

I don't want to "hard" code all the possible level because I could have 2, 4 or 10 levels. So I would like to find a way to do it automatically.

I simplified a bit the example above as I have to set the display=block every 2 "generations" (cf in my code the parentNode.parentNode)

So far this is my code (with 2 level down the rabbit hole!) and not automation:

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

Using indexLink() recursively :

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

Solution

  • How about a simple for loop?

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

    You can of course keep a counter to check how many steps you've traversed, etc. The .parentNode reference from the document level will be null, so that ends the iteration. (You can break out of the loop early too.)