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)-
- <ul class="sideNav">
- <li>
- <div></div>
- <a data-page="PAGE_100100007">Significance</a>
- </li>
- <li>
- <div></div>
- <a data-page="PAGE_100100008">Relevance</a>
- </li>
- <li data-sub="yes">
- <div class="arrow-right"></div>
- <a data-page="PAGE_100100009">Instruction</a>
- <ul class="subNav">
- <li>
- <a data-page="PAGE_100100010">Overview</a>
- </li>
- <li>
- <a data-page="PAGE_100100011">1a - LOC</a>
- </li>
- </ul>
- </li>
- </ul>
And my jQuery is this -
- $('body').on('click', '#previous', function(){
- var thisPage = $('#current').attr('data-page');
- var aIndex = $('.sideNav a[data-page="'+thisPage+'"]', this).index($('.sideNav a'));
- var newPage = $('.sideNav a').eq(aIndex - 1).attr('data-page');
- $('#current').html(thisPage + ' ' + aIndex + ' ' + newPage);
- $('#current').attr('data-page', newPage);
- });
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?