Let's say I have a div
that's called Z.
Zthat is a sub-sub-sub... child of a
divcalled
Bwhich is a child of a
divcalled
A`.
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)
}
}
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.)