如何选择列表中的每个next（）元素并取消选择prev（）？

Question

我一直坚持这一个相当一段时间。任何帮助将不胜感激。

我需要的是，一旦客户端点击>箭头，当前li元素将处于非活动状态，并且下一个li元素将处于活动状态。这个过程将继续下去，直到列表的最后一个将是唯一活动的列表。

这里是我的jQuery代码：

$(document).keyup(function(event) { 
    if (event.keyCode == 39){  
    $('#nav li .active').next().addClass('active').siblings().removeClass('active'); 
    } 
}); 

我愿意接受任何建议和代码:)修改

Answer 1

您可以使用.each()（JQuery的）。语法可以是这样的$('#nav li .active').each(function(index){Yourcodehere}) 随时发表评论。

Answer 2

这样的事情呢？

$(document).keyup(function(event){ 
    if(event.keyCode == 39){ 
     // Capture active li element 
     $active_li = $('#nav li.active'); 
     // Clear active from all li elements 
     $('#nav li').each(function() { 
     this.removeClass('active'); 
     }); 
     // Set active for next li element 
     $active_li.next().addClass('active'); 
     } 
    }); 

甚至可能：

$(document).keyup(function(event){ 
    if(event.keyCode == 39){ 
     $('#nav li.active').removeClass('active').next().addClass('active'); 
     } 
    }); 

Answer 3

这里有一个方法来完成这样的一个例子。标记显然会有所不同。 （的jsfiddle下面 - 按下右箭头按钮之前一定要在HTML帧点击）：

https://jsfiddle.net/d13kwz1p/

例HTML

<ul id="menu"> 
    <li class="active">One</li> 
    <li>Two</li> 
    <li>Three</li> 
</ul> 

例JS

var menu = $('#menu'); 
$(document).keyup(function(event) { 
    if (event.keyCode == 39) { 
     var current = menu.find('.active'); 
    var next = current.next(); 
    current.removeClass('active'); 
    if (current.is(':last-child')) { 
     menu.find(':first-child').addClass('active'); 
    } else { 
     next.addClass('active'); 
    } 
    } 
}); 

实施例的CSS：

#menu { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

#menu li { 
    background: #fff; 
    padding: 5px; 
    margin-bottom: 1px; 
} 

#menu li.active { 
    background: #ccc; 
}