Find next and previous link in a hierarchy
- by rebellion
I have a hierarchy with links nested in list element like this:
<ul>
<li><a href="#">Page 1</a>
<ul>
<li><a href="#">Page 1.1</a></li>
<li><a href="#">Page 1.2</a>
<ul>
<li><a href="#">Page 1.2.1</a></li>
<li><a href="#">Page 1.2.2</a></li>
</ul>
</li>
<li><a href="#">Page 1.3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a>
<ul>
<li><a href="#">Page 2.1</a></li>
<li><a href="#">Page 2.2</a></li>
</ul>
</li>
<li><a href="#">Page 3</a>
<ul>
<li><a href="#">Page 3.1</a>
<ul>
<li><a href="#">Page 3.1.1</a></li>
<li><a href="#">Page 3.1.2</a></li>
</ul>
<li><a href="#">Page 3.2</a></li>
<li><a href="#">Page 3.3</a></li>
<ul>
<li><a href="#">Page 3.1.1</a></li>
<li><a href="#">Page 3.1.2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Basically just a sitemap. But I want to make next and previous links with jQuery, which finds the active page you're on (probably by checking for a class), and finding the previous and next anchor element (taking no regards of the hierarchy). I've tried with next(), previous() and find() but can't seem to get it to work.
What is the easiest way to get the anchor elements before and after the current one?