在层级结构中查找下一个和上一个链接

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()，但似乎无法使其正常工作。

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

- rebellion

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);

- Gregoire

---

我认为第二行应该是... var anchors = $('a'); - Vivek

哇，这很简单。代码也惊人地少。谢谢！ - rebellion

实现“下一个”和“上一个”按钮/链接的HTML标记会是什么样子？ - Dan

Answer 2

假设当前页面的 <a> 元素有一个 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);

为了举例说明，我把上面的代码分成了三行，但你可以把它缩短为：

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);

- David Tang