2

我有一个嵌套导航列表（如下所示），其中每个链接指向最终构成一个整体的一系列页面中的一个页面。使用 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：http: //jsfiddle.net/LrHV8/）使其工作时，我只能遍历特定嵌套中的 DOM，而<ul>无法向上移动并遍历所有<a>#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而不是Prev = Link 3 / Next = [BLANK]

编辑

感谢您的帮助，David Fregoli 和 j08691。在阅读了您的建议和 jQuery 站点之后，我提出了这个解决方案，我认为它从每个答案中获取了最好的部分，同时仍然保持它对于我相当缺乏经验的眼睛的可读性：

$(document).ready(function(){

var $allItms = $('#sidemenu ul li'),
    $currPos = $allItms.index($('.navselected')),
    $prevTtl="",$prevLnk="",$prevTxt="",$nextTtl="",$nextLnk="",$nextTxt="";

    if ($currPos > 0){
        var $prevTtl = "Previous Article",
            $prevAnc = $allItms.eq($currPos-1).find('a'),
            $prevLnk = $prevAnc.attr('href'),
            $prevTxt = $prevAnc.text();
    }
    if ($currPos < $allItms.length-1){
        var $nextTtl = "Next Article",
            $nextAnc = $allItms.eq($currPos+1).find('a'),
            $nextLnk = $nextAnc.attr('href'),
            $nextTxt = $nextAnc.text();
    }

var $nextPrevNav = '<div class="prevnext"><span class="prevarticle">'+$prevTtl+'<br /><a href="'+$prevLnk+'">'+$prevTxt+'</a></span><span class="nextarticle">'+$nextTtl+'<br /><a href="'+$nextLnk+'">'+$nextTxt+'</a></span></div>';

$('#contentinner').prepend($nextPrevNav);
$('#contentinner').append($nextPrevNav);
});

小提琴

4

2 回答 2

1

清理了一下，这应该适合你：

jsFiddle 示例

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);
于 2013-05-10T14:04:55.880 回答
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')

带有所有菜单项的“平面”jQuery 对象

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

当前选定的项目

i = $links.index( $current )

所有项目中当前的索引是多少

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

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

于 2013-05-10T13:51:12.837 回答