使用锚.attr href作为计数器中数组的起点

Question

I'm currently working on a site that is using ajax to pull content in when an anchor link is clicked. I'm hoping to create a custom next/prev button using an array of predefined page links.

I'm trying to use a array as a counter to move through the pages when the next button is clicked. But I would like to use the current href attribute as a starting point then would move through the array by plus or minus one depend which button is click.

Here's the current codepen I'm working on http://codepen.io/veryrobert/pen/ocIhl

HTML:

<a id="value1" href="one.html">NEXT</a>
<a id="value2" href="">PREV</a>

Jquery:

$(function(){

  var pages = [ "one.html", "two.html", "three.html", "four.html" ];
  var prev = "#value2";
  var next = "#value1";

  // This works as a starting point
  counter = 0;

  // But I'd really like this to be the starting point
  // counter = $(next).attr("href");

   $(next).click(function(e){
   e.preventDefault();  
   counter = (counter + 1) % pages.length;

  }); 

  $(prev).click(function(e){
    e.preventDefault();  
    counter = (counter - 1) % pages.length;
    $(prev).attr( "href", counter ); 
   }); 


});

I'm not really great a javascript so please forgive me if this is a stupid approach or I'm going about this completely the wrong way.

All help is really appreciated

Thanks in advacnce

Answer 1

You can try this

function getCounter(element, array) {

    var href = element.getAttribute('href');

    for ( var i=0; i < array.length; i++) {

        if ( array[i] === href ) {
            return i;
        }

    }

    return -1;

}

You use it like this:

counter = getCounter( document.getElementById(next), pages );

Note: If you intend to use jQuery I am not sure what it returns when you call $(next).attr('href') . element.getAttribute('href') would return 'one.html' but element.href would return 'host.com/one.html'