Grouping nested elements
<p>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.</p>

<pre><code>&lt;ul id="sidemenu"&gt;
  &lt;li&gt;Heading 1
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
      &lt;li class="navselected"&gt;&lt;a href="#"&gt;Link 4&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;Heading 2
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link 5&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link 6&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link 7&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link 8&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;div id="contentinner"&gt;
    &lt;p&gt;The article content in here...&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>In previous attempts at getting this to work using the jQuery below (jsFiddle here: <a href="http://jsfiddle.net/LrHV8/" rel="nofollow">http://jsfiddle.net/LrHV8/</a>) I could only traverse the DOM within a particular nested <code>&lt;ul&gt;</code> without being able to move up and traverse all <code>&lt;a&gt;</code> in <code>#sidemenu</code></p>

<pre><code>$(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 = '&lt;div class="prevnext"&gt;&lt;span class="prevarticle"&gt;'+prevLinkTitle+'&lt;br /&gt;&lt;a href="'+prevNavLink+'"&gt;'+prevNavText+'&lt;/a&gt;&lt;/span&gt;&lt;span class="nextarticle"&gt;'+nextLinkTitle+'&lt;br /&gt;&lt;a href="'+nextNavLink+'"&gt;'+nextNavText+'&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;';

   $('#contentinner').prepend(nextPrevNav);
   $('#contentinner').append(nextPrevNav);
});
</code></pre>

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

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

<p><strong>EDIT</strong></p>

<p>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:</p>

<pre><code>$(document).ready(function(){

var $allItms = $('#sidemenu ul li'),
    $currPos = $allItms.index($('.navselected')),
    $prevTtl="",$prevLnk="",$prevTxt="",$nextTtl="",$nextLnk="",$nextTxt="";

    if ($currPos &gt; 0){
        var $prevTtl = "Previous Article",
            $prevAnc = $allItms.eq($currPos-1).find('a'),
            $prevLnk = $prevAnc.attr('href'),
            $prevTxt = $prevAnc.text();
    }
    if ($currPos &lt; $allItms.length-1){
        var $nextTtl = "Next Article",
            $nextAnc = $allItms.eq($currPos+1).find('a'),
            $nextLnk = $nextAnc.attr('href'),
            $nextTxt = $nextAnc.text();
    }

var $nextPrevNav = '&lt;div class="prevnext"&gt;&lt;span class="prevarticle"&gt;'+$prevTtl+'&lt;br /&gt;&lt;a href="'+$prevLnk+'"&gt;'+$prevTxt+'&lt;/a&gt;&lt;/span&gt;&lt;span class="nextarticle"&gt;'+$nextTtl+'&lt;br /&gt;&lt;a href="'+$nextLnk+'"&gt;'+$nextTxt+'&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;';

$('#contentinner').prepend($nextPrevNav);
$('#contentinner').append($nextPrevNav);
});
</code></pre>

<p><a href="http://jsfiddle.net/8zWXs/" rel="nofollow">Fiddle</a></p>
