jquery - Grouping nested elements -

i've got nested navigation list (like below) each link points 1 page in sequence of pages make whole. using jquery, want generate automatically "prev / next" links on each page. way, user reading articles in sequence can click jquery generated links "next" without having orientate using 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 @ getting work using jquery below (jsfiddle here: http://jsfiddle.net/lrhv8/) traverse dom within particular nested <ul> without being able move , traverse <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 group #sidemenu a in 1 "flat" object, locate .navselected , provide options prev , next in terms of #sidemenu whole?

in other words, if (in example) link 4 selected how can create prev = link3 / next = link 5 instead of prev = link 3 / next = [blank]

edit

thanks help, david fregoli , j08691. after reading around suggestions , jquery site i've come solution which, think, takes best bits each answer whilst still keeping readable 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

see demo: http://jsfiddle.net/lrhv8/2/

var $links = $('#sidemenu ul > li'),     $current = $links.filter('.navselected'),     = $links.index( $current ),     $nextnavitem = $links.eq(i+1),     $prevnavitem = $links.eq(i-1); 

let's break down:

$links = $('#sidemenu ul > li') 

the "flat" jquery object menu items

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

the current selected item

i = $links.index( $current ) 

what's index of current among items

 $nextnavitem = $links.eq(i+1),  $prevnavitem = $links.eq(i-1); 

get items @ index +1 , -1 of current.