jquery - 对嵌套元素进行分组

Question

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

<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/ )让它工作时，我只能遍历特定嵌套 <ul> 内的 DOM无法向上移动并遍历所有<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并提供上一个和下一个的选项 #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);
});

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

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

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

当前选择的项目

i = $links.index( $current )

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

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

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