如何使用 vanilla Javascript 在无序 and/or 嵌套列表序列中识别 previous/next link？

Question

我正在努力解决这个问题。

使用 vanilla Javascript，我需要识别前一个和下一个 <a> 元素，给定 n-number 中的任何给定 link n 深度的无序列表。

所以这是我的意思的示例结构：

<ul>
    <li><a href="http://www.example.com/">Link 1</a></li>
    <li><a href="http://www.example.com/">Link 2</a></li>
    <li><a href="http://www.example.com/">Link 3</a></li>
</ul>

<ul>
    <li><a href="http://www.example.com/">Link 4</a></li>
    <li><a href="http://www.example.com/">Link 5</a>

    <ul>
        <li><a href="http://www.example.com/">Link 6</a></li>
        <li><a href="http://www.example.com/">Link 7</a></li>
    </ul></li>

    <li><a href="http://www.example.com/">Link 8</a></li>
</ul>

<ul>
    <li><a href="http://www.example.com/">Link 9</a></li>
</ul>

Link 8 的前一个是 Link 7 下一个是 Link 9.

Link 9 的前一个是 Link 8 下一个是 Link 1.

以此类推

在一个结构层次上，我可以用这样的方法来解决这个问题：

function linkNext(currentFocus) {

    currentFocus = currentFocus || document.activeElement;

    var theNextElement;

    if (currentFocus.parentNode.nextElementSibling === null) { // Last <li> in list.
        if (currentFocus.parentNode.parentNode.nextElementSibling === null) { // Last list in bar.
            theNextElement = window.barbarbar.querySelector('a');
        } else {
            theNextElement = currentFocus.parentNode.parentNode.nextElementSibling.querySelector('a');
        }
    } else {
        theNextElement = currentFocus.parentNode.nextElementSibling.querySelector('a');
    }

    return theNextElement;

}

function linkPrev(currentFocus) {

    currentFocus = currentFocus || document.activeElement;

    var thePrevElement;

    if (currentFocus.parentNode.previousElementSibling === null) { // First <li> in list.
        if (currentFocus.parentNode.parentNode.previousElementSibling === null) { // First list in bar.
            thePrevElement = window.barbarbar.querySelector('a:last-of-type');
        } else {
            thePrevElement = currentFocus.parentNode.parentNode.previousElementSibling.querySelector('li:last-of-type a');
        }
    } else {
        thePrevElement = currentFocus.parentNode.previousElementSibling.querySelector('a');
    }

    return thePrevElement;

}

但是这超出了那个单一的深度级别就停止工作了，我很难想出一个潜在的解决方案。即使我使用的是 jQuery（我不是），甚至像 .closest() 或 .parents() 这样的东西似乎也不太合适。

是否有更好的方法？我真的需要在这里进行树遍历吗？

Answer 1

在我看来，您只需要保留所有 link 的列表并找到当前 link:

的位置即可

var links = Array.prototype.slice.call(document.querySelectorAll('a'));
var index = links.indexOf(currentFocus);
// nextLink = links[index - 1];
// previousLink = links[index + 1];

（加上一些回绕逻辑）

如何使用 vanilla Javascript 在无序 and/or 嵌套列表序列中识别 previous/next link？

How can I identify the previous/next link in a sequence of unordered and/or nested lists using vanilla Javascript?

html

javascript

dom

tree-traversal