JQuery列表选择下一个<a>并添加类

我想要使用下一个图像链接来选择元素列表中的下一个标记，并单击元素时添加一个类。我也想从以前的标签中删除类。我曾尝试使用.next（'a'）选择器和.nextAll（'a：first'），但似乎无法使它工作。我也尝试选择下一个'NavigationItem'。JQuery列表选择下一个<a>并添加类

我的代码如下：

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

     });

我也试图做了前面的按钮相反，但不能似乎得到这工作要么。

感谢您的时间，任何帮助将大大提高。

西蒙

来源

2011-11-23 Simon

$('.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/

来源

2011-11-23 11:23:51 Samich

完美！感谢您的回答，并感谢开关！我已经成功地将它翻转为prev按钮。传说。感谢让我意识到父方法，我还在学习jQuery，还有很长的路要走！ – Simon

不能调用next('a')怎么把你当前的目标是内部<li>这是一个水平的差异，所以才改变这一行：

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

来源

2011-11-23 11:23:38 sally

感谢您的意见，并感谢让我知道为什么我没有选择当前对象的。 – Simon

不用担心队友 – sally

JQuery列表选择下一个<a>并添加类

回答

相关问题