I've got a nested navigation list (like below) where each link points to one page in a sequence of pages that ultimately make a whole. Using jQuery, I want to generate automatically "prev / next" links on each page. This way, a user reading all the articles in sequence can simply click the jQuery generated links for "Next" without having to orientate themselves using the nested navigation.

```
<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>

```

In previous attempts at getting this to work using the jQuery below (jsFiddle here: <http://jsfiddle.net/LrHV8/>) I could only traverse the DOM within a particular nested `<ul>` without being able to move up and traverse all `<a>` in `#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);
});

```

How do I group all `#sidemenu a` in one "flat" object, locate `.navselected` and provide options for Prev and Next in terms of `#sidemenu` as a whole?

In other words, if (in this example) `Link 4` is selected how can I create `Prev = Link3 / Next = Link 5` instead of `Prev = Link 3 / Next = [BLANK]`

**EDIT**

Thanks for your help, David Fregoli and j08691. After reading around your suggestions and the jQuery site I've come up with this solution which, I think, takes the best bits from each answer whilst still keeping it readable for my fairly inexperienced eye:

```
$(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](http://jsfiddle.net/8zWXs/)