Finding the index of an item in a nested selection?

Finding the index of an item in a nested selection?

http://jsfiddle.net/jayblanchard/vgUjp/

I have some html that looks like this (this actually goes much further)-
  1. <ul class="sideNav">
  2.     <li>
  3.         <div></div>
  4.         <a data-page="PAGE_100100007">Significance</a>
  5.     </li>
  6.     <li>
  7.         <div></div>
  8.         <a data-page="PAGE_100100008">Relevance</a>
  9.     </li>
  10.     <li data-sub="yes">
  11.         <div class="arrow-right"></div>
  12.         <a data-page="PAGE_100100009">Instruction</a>
  13.         <ul class="subNav">
  14.             <li>
  15.                 <a data-page="PAGE_100100010">Overview</a>
  16.             </li>
  17.             <li>
  18.                 <a data-page="PAGE_100100011">1a - LOC</a>
  19.             </li>
  20.         </ul>
  21.     </li>
  22. </ul>
And my jQuery is this -
  1. $('body').on('click', '#previous', function(){
  2.     var thisPage = $('#current').attr('data-page');
  3.     var aIndex = $('.sideNav a[data-page="'+thisPage+'"]', this).index($('.sideNav a'));
  4.     var newPage = $('.sideNav a').eq(aIndex - 1).attr('data-page');
  5.     $('#current').html(thisPage + ' ' + aIndex + ' ' + newPage);
  6.     $('#current').attr('data-page', newPage);
  7. });

I have been looking at this for too long, but I want to get the index of the anchor element with a specific data-page within the group of anchor elements that my be interspersed throughout the page. I have tried several different combinations but I mus be looking at it wrong. Can anyone spot the error or point me in the right direction?