Question

我有一个嵌套导航列表（如下所示），其中每个链接指向最终构成整体的一系列页面中的一个页面。使用jQuery，我想在每个页面上自动生成“上一个/下一个”链接。这样，用户按顺序阅读所有文章只需单击jQuery生成的“Next”链接，而无需使用嵌套导航定位自己。

<ul id="sidemenu">
  <li>Heading 1
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li class="navselected"><a href="#">Link 4</a></li>
    </ul>
  </li>
  <li>Heading 2
    <ul>
      <li><a href="#">Link 5</a></li>
      <li><a href="#">Link 6</a></li>
      <li><a href="#">Link 7</a></li>
      <li><a href="#">Link 8</a></li>
    </ul>
  </li>
</ul>

<div id="contentinner">
    <p>The article content in here...</p>
</div>

在之前的尝试中，使用下面的jQuery（jsFiddle here http://jsfiddle.net/LrHV8/）使其工作，我只能遍历特定嵌套<ul>中的DOM，而无法向上移动并遍历所有{在<a>

中{1}}

#sidemenu

如何将所有$(document).ready(function(){ var currNavItem = $('#sidemenu .navselected'); var nextNavItem = currNavItem.next('li'); var prevNavItem = currNavItem.prev('li'); var nextNavText = nextNavItem.find('a').text(); var prevNavText = prevNavItem.find('a').text(); var nextNavLink = nextNavItem.find('a').attr('href'); var prevNavLink = prevNavItem.find('a').attr('href'); var prevLinkTitle = "Previous Article"; if (prevNavText == ""){ prevLinkTitle = ""; } var nextLinkTitle = "Next Article"; if (nextNavText == ""){ nextLinkTitle = ""; } var nextPrevNav = '<div class="prevnext"><span class="prevarticle">'+prevLinkTitle+'<br /><a href="'+prevNavLink+'">'+prevNavText+'</a></span><span class="nextarticle">'+nextLinkTitle+'<br /><a href="'+nextNavLink+'">'+nextNavText+'</a></span></div>'; $('#contentinner').prepend(nextPrevNav); $('#contentinner').append(nextPrevNav); });分组到一个“平面”对象中，找到#sidemenu a并按照.navselected整体提供Prev和Next的选项？

换句话说，如果选择（在此示例中）#sidemenu，我如何创建Link 4而不是Prev = Link3 / Next = Link 5

修改

感谢您的帮助，David Fregoli和j08691。在阅读了你的建议和jQuery网站后，我想出了这个解决方案，我认为，从每个答案中获取最佳位，同时仍然让我的相当缺乏经验的眼睛可读：

Prev = Link 3 / Next = [BLANK]

Fiddle

Answer 1

请参阅我的演示：http://jsfiddle.net/LrHV8/2/

var $links = $('#sidemenu ul > li'),
    $current = $links.filter('.navselected'),
    i = $links.index( $current ),
    $nextNavItem = $links.eq(i+1),
    $prevNavItem = $links.eq(i-1);

让我们分解一下：

$links = $('#sidemenu ul > li')

包含所有菜单项的“flat”jQuery对象

$current = $links.filter('.navselected')

当前所选项目

i = $links.index( $current )

所有项目中当前的索引是什么

 $nextNavItem = $links.eq(i+1),
 $prevNavItem = $links.eq(i-1);

获取当前的索引+1和-1的项目。

Answer 2

稍微清理一下这应该适合你：

<强> jsFiddle example

var idx = $('#sidemenu > li > ul > li').index($('#sidemenu li.navselected'));
var prevLink = '', nextLink = '';

if (idx > 1) prevLink = '<div class="prevnext"><span class="prevarticle">Previous Article<br /><a href="' + $('#sidemenu a').eq(idx - 1).attr("href") + '">Link ' + (idx) + '</a></span></div>';

if (idx < $('#sidemenu > li > ul > li').length-1) nextLink = '<div class="prevnext"><span class="prevarticle">Next Article<br /><a href="' + $('#sidemenu a').eq(idx+1).attr("href") + '">Link ' + (idx+2) + '</a></span></div>';

$('#contentinner').prepend(prevLink);
$('#contentinner').append(nextLink);

对嵌套元素进行分组

2 个答案: