I have a nested unordered list with an arbitrary number of levels. I want to be able to access the top-level list item element from any level list item element.
Markup
<ul class="list">
<li class="list-item">Level 1
<ul class="list">
<li class="list-item">Level 2
<ul class="list">
<li class="list-item">Level 3
<ul class="list">
<li class="list-item is-selected">Level 4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
For example, if I am on the following list item element level:
<li class="list-item">Level 4</li>
I want to be able to access the following list item element using JavaScript:
<li class="list-item">Level 1</li>
I have tried the following code, but it doesn’t work:
const currentListItem = document.querySelector('.list-item.is-selected');
const parentUlElement = currentListItem.parentNode;
while (parentUlElement && !parentUlElement.classList.contains('list')) {
parentUlElement = parentUlElement.parentNode;
}
// This will select the `<li class="list-item">Level 1` element.
const levelOneListItem = parentUlElement;
const currentListItem = document.querySelector('.list-item.is-selected');
const parentUlElement = currentListItem.parentNode;
while (parentUlElement && !parentUlElement.classList.contains('list')) {
parentUlElement = parentUlElement.parentNode;
}
const levelOneListItem = parentUlElement;
currentListItem.addEventListener("click", () => {
console.log("levelOneListItem", levelOneListItem);
});
<ul class="list">
<li class="list-item">Level 1
<ul class="list">
<li class="list-item">Level 2
<ul class="list">
<li class="list-item">Level 3
<ul class="list">
<li class="list-item is-selected">Level 4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
How can I access the top-level list item element from any level list item
Note: Te level of the elements is not fixed
3
Answers
You could use
closest()
to find it. Use as selector:This means: find in the path to the current node, the
list-item
whose grandparent is not alist-item
.You can use the has pseudo-class to find the first list-item that has a descendant list-item that is-selected:
It seems to me that your requirement to access the first
li
in theul
from any level within theul
is not the correct way to think about this.Why can’t you just select the first
li
within theul
from the beginning of the document?