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

Question

我知道这很简单,但.next()和.last()那种让我困惑.我有点混淆了.

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

小提琴

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

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检查小提琴

我很欣赏这个社区以及我得到的所有帮助,对于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');
    }
});

2nd需要事件委托,因为它是动态添加的元素

UPDATE

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

检查小提琴