Question

I am trying to use a next image link to select the next tag in a list of elements and add a class to the element when it is clicked. I would also like to remove the class from the previous tag aswell. I have tried using the .next(‘a’) selector and also the .nextAll(‘a:first’), but cannot seem to get it to work at all. I have also tried to select the next ‘NavigationItem’.

My code is as follows:

        <div id="navigation">
            <ul>
                <li><a class="navSelected NavigationItem" href="#" >Section 1</a><span>ben</span></li>
                <li><a class="NavigationItem" href="#" >Section 2</a><span>ben</span></li>
                <li><a class="NavigationItem" href="#" >Section 3</a><span>ben</span></li>
                <li><a class="NavigationItem" href="#" >Section 4</a><span>ben</span></li>
                <li><a class="NavigationItem" href="#" >Section 5</a><span>ben</span></li>
            </ul>
        </div>

  <img class="prev" src="img/prev.gif" alt="prev" width="42" height="53" />
  <img class="next" src="img/next.gif" alt="next" width="42" height="53" />

and the jQuery:

        $('.next').click(function(){
                $('a.navSelected').nextAll('a:first').addClass('navSelected');
                $('.NavigationItem').removeClass('navSelected');

        });

I am also trying to do the reverse for the previous button, but cant seem to get that working either.

Thanks for your time, any help would be greatly apprecitated.

Simon

Answer 1

$('.next').click(function() {
    $('#navigation li a.navSelected').removeClass('navSelected')
        .parent().next().find('a.NavigationItem').addClass('navSelected');
});

Code: http://jsfiddle.net/UQwn9/1/

Or if you need to swich to first on the last element:

$('.next').click(function() {
    var $el = $('#navigation li a.navSelected').removeClass('navSelected');
    var $next = $el.parent().next();

    if ($next.length == 0)
        $next = $('#navigation li:first');

    $next.find('a.NavigationItem').addClass('navSelected');
});

Code: http://jsfiddle.net/UQwn9/2/