Forums

mikedorrphoto

I'm having troubles traversing an array in jQuery. I want to make navigation (next & prev) for pages based on an li that I have on the page. I'd like to grab the hrefs from the list on the page, compare them with the url of the current page, then make a link to the previous and next pages from the list.

Here is what I've done so far, and am stuck...

HTML:

    <div class="nav">
  <!-- this is where I want two links: "Previous" and "Next" -->
  </div>

  <ul id="tracks">
  <li><a href="http://www.mydomain.com/track1/">Track 1</a></li>
  <li><a href="http://www.mydomain.com/track2/">Track 2</a></li>
  <li><a href="http://www.mydomain.com/track3/">Track 3</a></li>
  <li><a href="http://www.mydomain.com/track4/">Track 4</a></li>
  <li><a href="http://www.mydomain.com/track5/">Track 5</a></li>
  </ul>

jQuery:


  $('a').each(function(index, value) {
      var currentPage = "http://www.mydomain.com/track3/";
     if (value == currentPage){$('.nav').append(index + ': ' + value);}
  });

I just can't figure out how to get the hrefs from track 2 and track 4 and append links to the nav. Any help would be greatly appreciated!

Thank you!

mikedorrphoto

    <pre><code>
  <div class="nav">
  <!-- this is where I want two links: "Previous" and "Next" -->
  </div>

  <ul id="tracks">
  <li><a href="http://www.mydomain.com/track1/">Track 1</a></li>
  <li><a href="http://www.mydomain.com/track2/">Track 2</a></li>
  <li><a href="http://www.mydomain.com/track3/">Track 3</a></li>
  <li><a href="http://www.mydomain.com/track4/">Track 4</a></li>
  <li><a href="http://www.mydomain.com/track5/">Track 5</a></li>
  </ul>

My code wasn't showing in the original post. This is the HTML I'm working with.

Hompimpa

// Get the current page url:
var currentUrl = window.location.href;
var currLink = $('#tracks').find('a[href="' + currentUrl + '"]');
// Get the index:
var index = curLink.parent().index() + 1; // (+1) means 'next'
// Get the next `li > a` href:
var nextPage = currLink.parent().next().find('a').attr('href');
// Show the index & the href value:
$('.nav').append(index + ': ' + nextPage);

mikedorrphoto

Hompimpa,

Thanks for the help! I understand what you've done. I will go try it out now.

Thanks!

-Mike

treehouse : what would you like to learn today?

Forums

jQuery Array