2

我正在处理具有基于索引的下一个和上一个链接的页面。

我开始做这样的事情：

var nextPage = $("a.selected").next().find('a').attr('href');
window.location = nextPage;
return true;

问题是，如果“选定”锚点没有孩子或更多兄弟姐妹，这将不起作用。我希望能够转到父级别的下一个直接链接，并继续像这样通过树。在示例标记上，我希望能够从“Last Item”转到“Test”，如果有的话，可以转到 Test children...

从我所见，我需要为似乎不可靠的每个级别创造条件。最好的方法是什么？

标记看起来像这样http://jsfiddle.net/wQy6Q/

谢谢。

4

3 回答 3

1

如果您可以更改标记，则可以使用“数据”属性来检索下一个锚点。

标记示例：

<ul>
    <li><a href="test" data-index="1">Test 1</a></li>
    <li><a href="test" data-index="2">Test 2</a></li>
<ul>

Javascript 示例：

var index = $("a.selected").attr('data-index');
var nextPage = $('a[data-index="' + (index + 1) + '"]').attr('href');
window.location = nextPage;
return true;

如果您不想使用属性，也可以使用 css 类。

于 2013-03-12T10:33:13.767 回答
1

如果我正确理解您的要求：

对于您的示例：按以下顺序遍历您的树链接：

  • 1st：数据概览
  • 第二：部分数据如何协同工作
  • 3rd：数据示例软件
  • 4th：数据在上传过程中如何使用您的 Internet 连接
  • 5th：数据存储
  • 6th：Web 访问数据
  • 第七名：数据移动应用
  • 第八：资料要求
  • 第九名：数据安全

很快...

然后

$('a').each(function(index, link) {
    console.log(index);
    console.log(link);
    $(link).attr('href'); // href attribute
});

（见小提琴：http: //jsfiddle.net/wQy6Q/13/）

如果不让我知道，我将删除此答案

评论后（您可以跳过变量以获得更简单的代码）：

var collection = $('.treeview a');
var needle = $('.treeview a.selected');
var index = collection.index(needle);

if (index !== -1) { // we have a selected link
    var resultLink = $('.treeview a:eq(' + (index + 1) + ')');
    if (resultLink) { // not the last link
        console.log(resultLink.attr('href'));
    } else { // if last link we retrieve the first one (remove this if you don't need this)
        $('.treeview a:first').attr('href');
    }

}

小提琴示例：http: //jsfiddle.net/wQy6Q/19/（重要提示：出于测试原因，我将所选链接移至小提琴中的第二个）。

于 2013-03-12T10:39:58.120 回答
1

试试这个

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

//find children
var next = selected.find('a:first');

//find next
if(!next.length){
    next = selected.next().find('a:first');
}

//find parent
var parent = selected.parent();
while(!next.length && parent.not('.treeview')){
    var els = parent.find('a');
    var index = els.index(selected);
    console.log(next, parent)
    next = els.filter(':gt(' + index + ')').first();
    parent = parent.parent();
}

if(next.length){
    console.log(next);
    selected.removeClass('selected');
    next.addClass('selected')
}else{
    console.log('finished')
}

演示：小提琴

于 2013-03-12T11:09:18.493 回答