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检查 {{3} }

我很欣赏这个社区以及我得到的所有帮助，对于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需要事件委托，因为它是动态添加的元素

<强>更新

$(".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

您想使用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'); 
});

<强> Updated fiddle

Answer 3

如何只更改最后一个活动元素（DEMO）的css：

.item.active:last-child {
    color: green;
    border: 1px solid green;
}

并删除$('.item').last().addClass('last');。

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

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

修改：如果我找到你的权利并且如果你在最后一项上你不想执行某些代码，那么你只是遗漏了一个next()：

if(!nextItem.next().length) {
    console.log("Now on the last item");
}

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

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

3 个答案:

的 Check Fiddle