查找层次结构中的下一个和上一个链接

Question

我有一个层次结构，其中的链接嵌套在列表元素中，如下所示：

<ul>
    <li><a href="#">Page 1</a>
        <ul>
            <li><a href="#">Page 1.1</a></li>
            <li><a href="#">Page 1.2</a>
                <ul>
                    <li><a href="#">Page 1.2.1</a></li>
                    <li><a href="#">Page 1.2.2</a></li>
                </ul>
            </li>
            <li><a href="#">Page 1.3</a></li>
        </ul>
    </li>
    <li><a href="#">Page 2</a>
        <ul>
            <li><a href="#">Page 2.1</a></li>
            <li><a href="#">Page 2.2</a></li>
        </ul>
    </li>
    <li><a href="#">Page 3</a>
        <ul>
            <li><a href="#">Page 3.1</a>
                <ul>
                    <li><a href="#">Page 3.1.1</a></li>
                    <li><a href="#">Page 3.1.2</a></li>
                </ul>
            <li><a href="#">Page 3.2</a></li>
            <li><a href="#">Page 3.3</a></li>
                <ul>
                    <li><a href="#">Page 3.1.1</a></li>
                    <li><a href="#">Page 3.1.2</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

基本上只是一个站点地图。但我想使用 jQuery 建立下一个和上一个链接，它找到您所在的活动页面（可能通过检查类），并找到上一个和下一个锚元素（不考虑层次结构）。我尝试过 next()、previous() 和 find() 但似乎无法让它工作。

获取当前锚元素之前和之后的锚元素的最简单方法是什么？

Answer 1

var selected = $("a.selected");
var anchors = $("a");

var pos = anchors.index(selected);
var next = anchors.get(pos+1);
var prev = anchors.get(pos-1);

Answer 2

假设当前页面的 具有 class="current"，那么您可以执行以下操作来查找站点地图中当前页面的扁平化索引：

// Get current anchor
var currentA = $("a.current");

// Get array of all anchors in sitemap
var anchors = $("ul a"); // (would be better if you gave the ul an id)

// Find the index of the current anchor, within the (flattened) sitemap
var i = anchors.index(currentA);

I为了便于说明，将上面的代码分成 3 行，但您可以将上面的代码缩短为：

var i = $("ul a").index($("a.current"));

然后您可以编写函数来将页面导航到下一个和上一个链接：

// Go to the next link
function goToNext() {
    if (i + 1 < anchors.length) {
        window.location.href = anchors[i + 1].href;
    }
}

// Go to the previous link
function goToPrev() {
    if (i > 0) {
        window.location.href = anchors[i - 1].href;
    }
}

最后，将这些函数附加到您的下一个和上一个锚点：

$("a.next").click(goToNext);
$("a.prev").click(goToPrev);