Jquery 当.next（）到达.length（）的末尾时添加类？

我快到了，但是我的jQuery没有在正确的时间添加类，还有额外的两次点击

看看这把小提琴：

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:

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

  });

当单击

#next按钮时，jQuery应该将类添加到最后一个项中。我们将
.active
添加到
.next（）
项中，但是如果
nextItem
==0，我们添加红色类，问题是它会延迟两次单击

检查一下表，看看我的意思

  <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>

content1
内容2
内容3

哇，所有这些答案都很好！谢谢大家
 希望我理解您的问题，您需要的是当它是列表中的最后一项时，只需将颜色设置为红色即可。如果这是您的问题，那么此代码肯定会帮助您

试试这个：

HTML:

希望我理解了您的问题，您需要的是当它是列表中的最后一项时，只需将颜色设置为红色即可。如果这是您的问题，那么此代码肯定会帮助您

试试这个：

HTML:

该问题是由于使用了
.next
方法而未指定其他选择器造成的。在您的情况下，超链接
下一步按钮
位于最后一项之后

您可以使用
。下一步
方法如下：

var nextItem = currentItem.next('.item');

因此，在最后一个元素之后，将不会选择链接

我还建议将这一行代码移动：

currentItem.removeClass('active');

在
if
块内，以避免删除最后一项的
active
类

试试看：
问题是由于使用了
.next
方法而没有指定其他选择器造成的。在您的情况下，超链接
下一步按钮
位于最后一项之后

您可以使用
。下一步
方法如下：

var nextItem = currentItem.next('.item');

因此，在最后一个元素之后，将不会选择链接

我还建议将这一行代码移动：

currentItem.removeClass('active');

在
if
块内，以避免删除最后一项的
active
类

试试看：

.next（）
将为您提供下一个兄弟姐妹
.next（'.item'）
将为您提供类项的下一个同级

此外，过滤器不是必需的。你可以这么做

var currentItem=$（'.item.active'）

.next（）
将为您提供下一个兄弟姐妹
.next（'.item'）
将为您提供类项的下一个同级

此外，过滤器不是必需的。你可以这么做

var currentItem=$（'.item.active'）

试一试

演示：
试试看

演示：
是的，就是这个。。我对那些操作员不在行是的你搞定了。。我并没有在我的真实代码中添加红色，这只是为了演示，只是在最后一项中添加了一个类。既然你帮了我，我就可以玩得开心了！是的，就是这个。。我对那些操作员不在行是的你搞定了。。我并没有在我的真实代码中添加红色，这只是为了演示，只是在最后一项中添加了一个类。既然你帮了我，我就可以玩得开心了！这很接近，除了类需要在“内容3”出现之前添加，以及它的出现，阿披舍克耆那教通过使用这很接近，除了类需要在“内容3”出现之前添加，以及它的出现，阿披舍克耆那教通过使用我拿回来这是更合理的，我喜欢这个。。我希望我能奖励两个答案，它们都很棒。在我发布之前，当我摆弄它的时候，我有一些接近这个的东西，我要试着找到我离开的地方。谢谢你，阿鲁尼，把它拿回来这声音好多了，我喜欢这个。。我希望我能奖励两个答案，它们都很棒。在我发布之前，当我摆弄它的时候，我有一些接近这个的东西，我要试着找到我离开的地方。谢谢你，阿伦
$('#next-button').on('click', function () {
    var nextItem = currentItem.next('.item');

    if (nextItem.length) {
        currentItem.removeClass('active');
        currentItem = nextItem.addClass('active');
    } else if (nextItem.length == 0) {
        $('.item:last').addClass('red');
        alert('class red added');
    }

});

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