If .next() element is the .last() element?

Question

I know it's quite simple, but .next() and .last() kind of confuse me. I'm kind of mixed up.

What I am essentially trying to do is add a class when the next element is the last of the kind in a list.

Fiddle

In my current code it adds the class after the last element is displayed, when it goes back to the first.

jQuery: Im sure it has to do with the .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');  
});

This adds the class when you click on the last element going back towards the first.

Also for a bonus question, I am confused as to why when I add class .clickable to the breadcrumbs only the first one takes me to the right data-id check the Fiddle

I appreciate this community and all the help I am getting, for a expert in jQuery this will be quite easy, thanks for helping me learn.

Answer 1

There u go for the first requirement

$("#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 requires event delegation since it's a dynamically added element

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

Check Fiddle

Answer 2

You want to use jQuery is() to check if the next item is the last on any of your two lists

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

Also you need event delegation on the breadcrumbs parent for the click event since the clickable class will be added dynamically to your elements

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

Updated fiddle