Question

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

<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创建下一个和上一个链接，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

假设当前页面的<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);

为了便于说明，我将上述内容分为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);

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

2 个答案: