Список JQuery выберите следующий <a>и добавьте класс

Question

Я пытаюсь использовать ссылку на следующее изображение, чтобы выбрать следующий тег в списке элементов и добавить класс к элементу при его нажатии.Я также хотел бы удалить класс из предыдущего тега.Я попытался использовать селектор .next ('a'), а также .nextAll ('a: first'), но не могу заставить его работать вообще.Я также попытался выбрать следующий «NavigationItem».

Мой код выглядит следующим образом:

        <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" />

и jQuery:

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

        });

Я также пытаюсь сделать обратное для предыдущей кнопки, но не могу показатьсячтобы все заработало.

Спасибо за ваше время, любая помощь будет принята с благодарностью.

Симон

Answer 1

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

Код: http://jsfiddle.net/UQwn9/1/

Или если вам нужно перейти к первому элементу:

$('.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');
});

Код: http://jsfiddle.net/UQwn9/2/

Answer 2

Вы не можете вызвать next('a'), потому что ваш текущий объект находится внутри <li> это разница в один уровень, поэтому просто измените эту строку на:

 $('a.navSelected').parent().next('li').find('a').addClass('navSelected');