Recently I had to figure out how to traverse up the DOM tree so I could target a sibling of a HTML element that was two levels up the DOM (grandparent). The .parent() method can travel a single level up the DOM tree to find the parent element. That wouldn't work because I need to go two levels up.
What I needed is the .closest() method. What I needed to do was traverse up the DOM and find the first parent element that matches the selector (the element in the parenthesis).
Once I found that element then I would store it in a variable. Then I used the .find() method to search through the all descendant elements of the selector. From what I can tell I would be able to use the .children() method, which only travels a single level down, in this instance.
-
.find(): It will search through the matched elements’ child, grandchild, great-grandchild, etc,... All levels down. -
.children(): It will search through the matched elements’ child only. Single level down.
This example shows that when I click on an element that has the class of .name I want to traverse up the DOM tree to find the first parent element that matches the class .item. I will store that in a variable called parentItem. Then I traverse down the DOM tree using the .find() method (all levels inside the parent element which is what's stored in parentItem variable.) to find the first element that has the class of .desc and then toggle that element.
Note: I could have used the .children() method (instead of .find()) too because I only had one level to traverse down in the DOM.
The second click function is similar but I only need to get the parent selector of the button I click in order to hide the parent.
In the above example, I used jQuery because that's what we're using for that project at work but this will work with regular ole' javascript too but it's a little more complicated. I'll get to that at a later time.