jquery - 当 .next() 到达 .length() 末尾时添加类？

Question

我快到了，但我的 jQuery 没有在正确的时间添加该类，还需要额外单击两次。

看看这个 fiddle :http://jsfiddle.net/X7L8q/4/

jQuery:

  var currentItem = $('.item').filter('.active');

  $('#next-button').on('click', function () {
      var nextItem = currentItem.next();
      currentItem.removeClass('active');

      //Here is the meat of the code, its adding the class a few clicks later than I want.
      if (nextItem.length) {
          currentItem = nextItem.addClass('active');
      } else if (nextItem.length == 0) {
          $('.item:last').addClass('red');
          alert('class red added');
      }

  });

HTML:

当单击#next-button时，jQuery应该将类添加到最后一个项目，我们将.active添加到.next() > item，但是如果 nextItem == 0 我们添加红色类，问题是它发生了两次点击。

检查fiddle明白我的意思。

  <div class="item active" data-category="sharks">content1</div>
  <div class="item" data-category="tigers">content2</div>
  <div class="item" data-category="lions">content3</div> 
  <a href="#" class="btn btn-primary" id="next-button" rel="nofollow">Next</a>

哇，所有这些答案都很好!谢谢大家!

Answer 1

尝试

var items = $('.item'), currentItem = items.filter('.active'), last = items.last();

$('#next-button').on('click', function () {
    currentItem.removeClass('active');
    var nextItem = currentItem.next();

    if (nextItem.length) {
        currentItem = nextItem.addClass('active');
        if (currentItem.is(last)) {
            $('.item:last').addClass('red');
        }
    }
});

演示:Fiddle