Question

我使用以下代码创建了此Fiddle：

这是我的问题我想通过选择最后一个 li（第五个）标签来做同样的行为，但是不 第四个就像在这个例子中一样，但我不知道如何做到这一点:(

我希望有人可以帮助我... THX !!

$(document).ready(function() {

 $("button").click(function() {
    $('.active').removeClass('active').next('li').addClass('active')
      if ($('ul li:last').hasClass('active')) {
          $('ul li:last').removeClass('active')
          $('ul li:first').addClass('active')
      }

  });


});

Answer 1

你应该加入else块。否则，两个方法将对最后一个列表项运行两次，导致最后一个元素被“跳过”。

更好的解决方案（演示：http://jsfiddle.net/9dF22/5/）：

$(document).ready(function() {
    $("button").click(function() {
        var $li = $('ul li'),
            $active = $li.filter('.active:first'),
            $next = $active.next();
        $active.removeClass('active');
        if ($next.length) {               // length === 0 if there is no next one
            $next.addClass('active');
        } else {
            $li.first().addClass('active');
        }
    });
});

演示：http://jsfiddle.net/9dF22/3/

$(document).ready(function() {
    $("button").click(function() {
        if ($('ul li:last').hasClass('active')) {
            $('ul li:last').removeClass('active')
            $('ul li:first').addClass('active')
        } else {
            $('.active').removeClass('active').next('li').addClass('active')
        }
    });
});

Answer 2

我有更好的方法来做到这一点

$("button").click(function() {
    if($('.active').next('li').length != 0) {
        $('.active').removeClass('active').next('li').addClass('active')
    } else {
        $('.active').removeClass('active');   
        $("ul li").first().addClass('active');
    }      
});

Jquery最后一个选择器解决方案

2 个答案:

演示：http://jsfiddle.net/9dF22/3/

Demo