分組嵌套元素

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