Issue
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
Solution
You could use closest()
to find it. Use as selector:
*:not(.list-item) > .list > .list-item
This means: find in the path to the current node, the list-item
whose grandparent is not a list-item
.
const currentListItem = document.querySelector('.list-item.is-selected');
const levelOneListItem = currentListItem.closest("*:not(.list-item) > .list > .list-item");
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>
Answered By - trincot
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.