Jquery 如果.next（）元素是.last（）元素？

我知道这很简单，但是

.next（）

和

.last（）

有点让我困惑。我有点糊涂了

我实际上是想在下一个元素是列表中最后一个元素时添加一个类

在我当前的代码中，它在显示最后一个元素之后添加类，当它返回到第一个元素时

jQuery:我确信这与

长度有关

这会在单击返回第一个元素的最后一个元素时添加类

还有一个额外的问题，我不明白为什么我在面包屑中添加class
。clickable
，只有第一个会将我带到右边的
数据id
检查

我感谢这个社区以及我得到的所有帮助，对于jQuery方面的专家来说，这将非常容易，感谢您帮助我学习。
只更改最后一个活动元素（）的css如何：

并删除
$（'.item'）.last（）.addClass（'last'）

当然，您可以在jQuery中以与css中完全相同的方式定位最后一项：

$('.item.active:last-child')

编辑：如果我没搞错，但如果你在最后一项上，你不想执行一些代码，那么你只缺少一个
next（）
：

您想使用jQuery
is（）
检查下一项是否是两个列表中的最后一项

$("#next-button").on('click', function () {
    //enable next breadcrumb
    $('.clickable').next().addClass('clickable');
    var nextItem = $('.active').removeClass('active last').next();
    //start again
    if (!nextItem.length) {
        nextItem = $('.item:first,.breadcrumb-cell:first');
    }
    //mark as active
    nextItem.addClass('active');
    //check if is last
    if (nextItem.is('.breadcrumb-cell:last,.item:last')) 
        nextItem.addClass('last');
});

您还需要对单击事件的
breadcrumbs
父级进行事件委派，因为
clickable
类将动态添加到元素中

$(".breadcrumbs").on('click','.clickable .breadcrumb',function () {
    //reset active and last
    $('.active').removeClass('active');
    $('.last').removeClass('last');
    var theID = $(this).data("id");
    //get new item
    var selected = $("#" + theID);
    //mark item and breadcrumb as active
    $(this).parent().add(selected).addClass('active');
    //check if selected is last
    if(selected.is('.item:last'))
        //mark item and breadcrumb as last
        $(this).parent().add(selected).addClass('last'); 
});

第一个要求就在这里

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

    if (!nextItem.length) {
        nextItem = $('.item').first();
        $('.item').last().addClass('last');
    }
    nextItem.addClass('active');
    breadItem.addClass('clickable');
    // 1st Req 
    // Remove the last class for items
    $('.item').removeClass('last');
    var last = $('.item').last();
    // Check if the item is the last one
    // it true add last and remove active
    if(nextItem.is(last)) {
        nextItem.addClass('last').removeClass('active');
    }
});

第二个需要事件委派，因为它是动态添加的元素

更新

$(".breadcrumbs").on('click', '.clickable .breadcrumb', function () {
    $('.active').removeClass('active');
    var theID = $(this).data("id");

    var selectedItem = $("#" + theID);
    selectedItem.addClass('active');

    $('.item').removeClass('last');
    var last = $('.item').last();
    if(selectedItem.is(last)) {
         selectedItem.addClass('last').removeClass('active');
    }
});

如果最后一个元素变成红色，最后一个元素应该变成绿色，这对吗？你能更清楚地说明一下你想要实现什么吗？坦率地说，当“速度”是红色/活动时，下一个/最后一个项目是灵活性，它应该在速度之后变成绿色。。列表中的最后一项应在类处于活动状态时获取最后一个类。“灵活性”/“最后一个”应在类处于活动状态时获取类
。。。当第一个项目处于活动状态时，它将获取class
。last
。。。因此，在速度之后，最后一项应该是绿色的。这个问题有6票赞成？我遗漏了什么吗？好吧，在我的实时代码中，我需要对最后一个
.item
执行很多操作，因此我需要能够使用jQuery定位最后一个项。。如果是在最后一项上，我将向其他元素添加类。。绿色仅用于测试目的。一旦我弄清楚如何操作最后一个项目，我就会有更多的灵活性。我在想，如果它能工作，我想说currentitem是否是最后一个，然后在我的HTML的另一部分中向另一个元素添加类。我不确定.item.active:last child，除非你试图以.active的最后一个子元素为目标。据我所知，只有一个active@Huangism虽然我理解你的意思，但看看演示它的工作原理。是的，它看起来可能也给了我我所寻求的灵活性，让我来玩一下。。感谢迄今为止这似乎是最好的解决方案，感谢您的帮助。我只是不确定在单击事件的最后一项中添加
last
类是否有意义。最后一项总是一样的。。。始终可以使用最后一个子选择器检查当前活动项是否为最后一个。或者，如果最后一个孩子不是首选选项，为什么不从一开始就添加最后一个类呢？是的，但是如果（nextItem.is（'.breadcrumb cell:last，.item:last'））nextItem.addClass（'last'）在“if”中，我可以灵活地将类和内容添加到任何我想要的地方。这不是向最后一项添加类，而是在类到达最后一项时进行操作。这有意义吗？对做其他事情来说是有意义的。@Mike我更新了一个更完整的答案，Sushanth的答案仍然有一些问题，面包屑会随着点击事件更新。这很好，但我不想在“速度”上添加
。last
但在将active从speed中删除，同时将active添加到最后一个类之后，我想将active添加到最后一个元素。这有意义吗？。。。当列表结束时，最后一个元素得到类…好吧，太棒了，你们都是最好的，我正在看@Marcel Gwerder代码，然后我将看到这个。。。我喜欢有这些选项，看到编写jQuery的不同方法可以帮助我学习。。我感谢你的努力！：）对检查了这把小提琴，它看起来很棒！你是最棒的@Sushanth-连续两次帮助我。。我希望尽快变得足够好，这样我就可以像你一样开始帮助别人了guys@Mike.. 很高兴能提供帮助：）这很难，你的代码很棒，@koala_dev也是。我使用了这段代码，因为你在单击面包屑时删除了最后一个类，而它不是最后一个元素。
$(".breadcrumbs").on('click','.clickable .breadcrumb',function () {
    //reset active and last
    $('.active').removeClass('active');
    $('.last').removeClass('last');
    var theID = $(this).data("id");
    //get new item
    var selected = $("#" + theID);
    //mark item and breadcrumb as active
    $(this).parent().add(selected).addClass('active');
    //check if selected is last
    if(selected.is('.item:last'))
        //mark item and breadcrumb as last
        $(this).parent().add(selected).addClass('last'); 
});

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

    if (!nextItem.length) {
        nextItem = $('.item').first();
        $('.item').last().addClass('last');
    }
    nextItem.addClass('active');
    breadItem.addClass('clickable');
    // 1st Req 
    // Remove the last class for items
    $('.item').removeClass('last');
    var last = $('.item').last();
    // Check if the item is the last one
    // it true add last and remove active
    if(nextItem.is(last)) {
        nextItem.addClass('last').removeClass('active');
    }
});

$(".breadcrumbs").on('click', '.clickable .breadcrumb', function () {
    $('.active').removeClass('active');
    var theID = $(this).data("id");

    var selectedItem = $("#" + theID);
    selectedItem.addClass('active');

    $('.item').removeClass('last');
    var last = $('.item').last();
    if(selectedItem.is(last)) {
         selectedItem.addClass('last').removeClass('active');
    }
});