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');

JQuery列表选择下一个<a> and add class</a>

2 个答案: