分组嵌套元素

Question

我有一个嵌套的导航列表（如下所示），其中每个链接指向最终构成整个页面的页面序列中的一个页面。使用jQuery，我想在每个页面上自动生成“prev/next”链接。这样，用户按顺序阅读所有文章，只需单击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/）工作，我只能遍历一个特定的嵌套<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]

编辑

感谢您的帮助，大卫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') 

与所有的菜单项

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

当前所选项目的 “扁平化” jQuery对象

i = $links.index($current) 

什么是所有项目中当前的指数

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

GET在当前的索引+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);