Get the next href in a list in another file with jQuery?

I've searched and searched, and it seems I'm stuck on this problem. Somehow I thought this wouldn't be too hard, and it probably isn't for anyone with a little more knowledge about jQuery.

I have an .html file, lets call it "originalfile.html", with a couple of lists, something like this:

<div id="content">
    <ul id="firstlist">
       <li class="link1"><a href="/path/link1.html" target="_blank"></a></li>
       <li class="link2"><a href="/path/link2.html" target="_blank"></a></li>
       <li class="link3"><a href="/path/link3.html" target="_blank"></a></li>
    </ul>
    <ul id="secondlist">
       <li class="link4"><a href="/path/link4.html" target="_blank"></a></li>
       <li class="link5"><a href="/path/link5.html" target="_blank"></a></li>
       <li class="link6"><a href="/path/link6.html" target="_blank"></a></li>
    </ul>
</div>

The links open in a new window, and in the "link(x).html" files I would like "previous" and "next" buttons to keep going up/down the lists in the now closed original file, prefferably with some way to return to :first href when hitting ==0 in all the lists in the div #content, or in other words a loop.

The "next" and "prev" buttons should open the next/prev link in the list from the original file in the _self window, where the next file will have the same buttons, and so on.

I don't know if I'm going about this the right way at all, but I have gotten this far:

I get the current filename by using

var filename = location.pathname;

I then get the original list by using

$.ajax({
   url: '/path/originalfile.html',
   success: function(response) {
   $("#linkdiv").html(jQuery(response).find('#content').html());
   });

I'm using a new div "#linkdiv", then search for the current filename in that div

$("#linkdiv a[href=(filename)]");

I'm having trouble getting this to work, and how to find the next() and prev() href etc. I believe I might be missing a .live somewhere?

Now the question is, is there somehow a way to do something like this:

    $.ajax({
   url: '/path/originalfile.html',
   success: function(response) {

   $("#next").html(jQuery(response).
   find('href with same value as current filename').
   next("href");

   $("#prev").html(jQuery(response).
   find('href with same value as current filename').
   prev("href");
   });

Now I know this code does not work, but would there be a way to find the href by using the current filename, then getting the previous and next href and attaching them to buttons with the id of #next and #prev ???

Solution

jQuery doesn't seem to be the right tool for the job. If you really have 6 separate pages then they would each have their own set of navigation buttons. If you are doing some sort of template, or generated code then state that.

Also not sure why you would want to open into a new window?

HTML Page 1

<ul id="firstlist">

   <li class="link2"><a href="/path/link2.html" target="_blank">Next</a></li>
   <li class="link3"><a href="/path/link3.html" target="_blank">3</a></li>
</ul>

HTML Page 2

<ul id="firstlist">
   <li class="link1"><a href="/path/link1.html" target="_blank">Previous</a></li>

   <li class="link3"><a href="/path/link3.html" target="_blank">Next</a></li>
</ul>

HTML Page 3

<ul id="firstlist">
   <li class="link1"><a href="/path/link1.html" target="_blank">1</a></li>
   <li class="link2"><a href="/path/link2.html" target="_blank">Previous</a></li>

</ul>