jquery - 如果 .next() 元素是 .last() 元素？

Question

我知道这很简单，但是 .next() 和 .last() 有点让我困惑。我有点困惑。

我本质上想做的是当下一个元素是列表中最后一个元素时添加一个类。

<强> Fiddle

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

jQuery: 我确定它与 .length

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

    if (!nextItem.length) {
        nextItem = $('.item').first();

        //Here I try to add class ".last" to the last ".item" element
        $('.item').last().addClass('last');
    }
    nextItem.addClass('active');
    breadItem.addClass('clickable');  
});

当您单击最后一个元素返回第一个元素时，这会添加类。

还有一个额外的问题，我很困惑为什么当我将类 .clickable 添加到面包屑时，只有第一个将我带到正确的 data-id检查Fiddle

我感谢这个社区以及我得到的所有帮助，对于 jQuery 专家来说这将非常容易，感谢您帮助我学习。

Answer 1

第一个要求就这样了

$("#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');
    }
});

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

更新

$(".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');
    }
});

<强> Check Fiddle