Advanced filling of prev and next buttons with jQuery

Question

In a hidden list I have a variable list with this data (in this example www.domain.com/2009 is the current URL):

 <ul id="WalkingYears" style="visibility: hidden; display:none;"> <li id="Walk2011"><a href="http://domain.com/2011" title="2011"><img src="some-imga.jpg"></a></li> <li id="Walk2010"><a href="http://domain.com/2010" title="2010"><img src="some-imgs.jpg"></a></li> <li id="Walk2008"><a href="http://domain.com/2008" title="2008"><img src="some-imgf.jpg"></a></li> <li id="Walk2007"><a href="http://domain.com/2007" title="2007"><img src="some-imgg.jpg"></a></li> <li id="Walk2006"><a href="http://domain.com/2006" title="2006"><img src="some-imgh.jpg"></a></li> <li id="Walk2005"><a href="http://domain.com/2005" title="2005"><img src="some-imgj.jpg"></a></li> <li id="Walk2004"><a href="http://domain.com/2004" title="2004"><img src="some-imgk.jpg"></a></li> <li id="Walk2003"><a href="http://domain.com/2003" title="2003"><img src="some-imgl.jpg"></a></li> <li id="Walk2002"><a href="http://domain.com/2002" title="2002"><img src="some-imgz.jpg"></a></li> <li id="Walk2001"><a href="http://domain.com/2001" title="2001"><img src="some-imgx.jpg"></a></li> </ul> 

The above list is auto-generated and I can change this if I like; for example into:

 <div id="Walk2011" data-target="http://domain.com/2011" data-img="some-imga.jpg" data-title="2011"></div> <div id="Walk2010" data-target="http://domain.com/2010" data-img="some-imgs.jpg" data-title="2010"></div> <div id="Walk2008" data-target="http://domain.com/2008" data-img="some-imgd.jpg" data-title="2008"></div> <div id="Walk2007" data-target="http://domain.com/2007" data-img="some-imgf.jpg" data-title="2007"></div> <div id="Walk2006" data-target="http://domain.com/2006" data-img="some-imgg.jpg" data-title="2006"></div> <div id="Walk2005" data-target="http://domain.com/2005" data-img="some-imgh.jpg" data-title="2005"></div> <div id="Walk2004" data-target="http://domain.com/2004" data-img="some-imgj.jpg" data-title="2004"></div> <div id="Walk2003" data-target="http://domain.com/2003" data-img="some-imgk.jpg" data-title="2003"></div> <div id="Walk2002" data-target="http://domain.com/2002" data-img="some-imgl.jpg" data-title="2002"></div> <div id="Walk2001" data-target="http://domain.com/2001" data-img="some-imgz.jpg" data-title="2001"></div> 

You see that the current URL (www.domain.com/2009) is not showing in this list.

Now I'd like to fill the prev and next navigation, based on the current url, using the values mentioned above (title, href, image src):

 <a href="http://domain.com/2008" title="2008" id="balk-prev-btn" class="prev-btn left"> <img src="some-imgd.jpg" alt="2008"> <span class="icon"></span> </a> <a href="http://domain.com/2010" title="2010" id="balk-next-btn" class="next-btn right"> <img src="some-imgs.jpg" alt="2010"> <span class="icon"></span> </a> 

I guess I need to

• first find out what the current URL is
• then compare it to the data in the list
• somehow point out the prev and next page

Also when having selected a certain variable (the name of a walker) the links in the list will be different and the URL will be www.domain.com/walkername/2009 :

 <div id="Walk2011" data-target="http://domain.com/walkername/2011" data-img="some-imga.jpg" data-title="2011"></div> <div id="Walk2010" data-target="http://domain.com/walkername/2010" data-img="some-imgs.jpg" data-title="2010"></div> <div id="Walk2008" data-target="http://domain.com/didnotwalk/2008" data-img="some-imgd.jpg" data-title="2008"></div> <div id="Walk2007" data-target="http://domain.com/didnotwalk/2007" data-img="some-imgf.jpg" data-title="2007"></div> <div id="Walk2006" data-target="http://domain.com/walkername/2006" data-img="some-imgg.jpg" data-title="2006"></div> <div id="Walk2005" data-target="http://domain.com/didnotwalk/2005" data-img="some-imgh.jpg" data-title="2005"></div> <div id="Walk2004" data-target="http://domain.com/didnotwalk/2004" data-img="some-imgj.jpg" data-title="2004"></div> <div id="Walk2003" data-target="http://domain.com/walkername/2003" data-img="some-imgk.jpg" data-title="2003"></div> <div id="Walk2002" data-target="http://domain.com/didnotwalk/2002" data-img="some-imgl.jpg" data-title="2002"></div> <div id="Walk2001" data-target="http://domain.com/didnotwalk/2001" data-img="some-imgz.jpg" data-title="2001"></div> 

In this case the prev and next button should only show the links with the walker name in it :) and should look like this:

 <a href="http://domain.com/walkername/2006" title="2006" id="balk-prev-btn" class="prev-btn left"> <img src="some-imgg.jpg" alt="2006"> <span class="icon"></span> </a> <a href="http://domain.com/walkername/2010" title="2010" id="balk-next-btn" class="next-btn right"> <img src="some-imgs.jpg" alt="2010"> <span class="icon"></span> </a> 

Can someone help me? tnx!

Answer 1

Okay so if you have this layout, this script should do the job

<div id="Walk2011" data-target="http://domain.com/walkername/2011" data-img="some-imga.jpg" data-title="2011"></div>
<div id="Walk2010" data-target="http://domain.com/walkername/2010" data-img="some-imgs.jpg" data-title="2010"></div>
<div id="Walk2008" data-target="http://domain.com/didnotwalk/2008" data-img="some-imgd.jpg" data-title="2008"></div>
<div id="Walk2007" data-target="http://domain.com/didnotwalk/2007" data-img="some-imgf.jpg" data-title="2007"></div>
<div id="Walk2006" data-target="http://domain.com/walkername/2006" data-img="some-imgg.jpg" data-title="2006"></div>
<div id="Walk2005" data-target="http://domain.com/didnotwalk/2005" data-img="some-imgh.jpg" data-title="2005"></div>
<div id="Walk2004" data-target="http://domain.com/didnotwalk/2004" data-img="some-imgj.jpg" data-title="2004"></div>
<div id="Walk2003" data-target="http://domain.com/walkername/2003" data-img="some-imgk.jpg" data-title="2003"></div>
<div id="Walk2002" data-target="http://domain.com/didnotwalk/2002" data-img="some-imgl.jpg" data-title="2002"></div>
<div id="Walk2001" data-target="http://domain.com/didnotwalk/2001" data-img="some-imgz.jpg" data-title="2001"></div>

jQuery based script:

var xlocation =  "http://www.domain.com/walkername/2009".match(/(\/[a-zA-Z]+\/)(\d+)/); //sorry for ugly regexp --> ["/walkername/2009", "/walkername/", "2009"], also here should be used window.location.href , but for example lets use static string;
        //find and filter only links which have 'walkername' in data-tagert
    $el = $('#WalkingYears div[id^=Walk]').filter(function(i,el){
        return $(el).attr('data-target').indexOf(xlocation[1]) > 0;
    }),
//sort if divs is scrambeled
    $elSorted = $el.sort(sorter);
    prev =  jQuery.grep($elSorted,function(el,i){
        return $(el).attr('data-title').replace(/^\D+/g, '')*1<xlocation[2]*1
    })
    next = jQuery.grep($elSorted,function(el,i){
        return $(el).attr('data-title').replace(/^\D+/g, '')*1>xlocation[2]*1
    })
    var sorter = function(a,b){
    var a = $(a).attr('data-title').replace(/^\D+/g, '')*1,
    b = $(b).attr('data-title').replace(/^\D+/g, '')*1
    return b-a
    }

    //ADD href to buttons...
    $('#balk-prev-btn').prop('href',$(prev).first().attr('data-target'))
    $('#balk-next-btn').prop('href',$(next).last().attr('data-target'))

You`ll need to check if prevEl and NextEl still exists in case if current page is first or last. Also you will need to review regexp used for parsing url :)