9

我知道这很简单，但是.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 专家来说，这将非常容易，感谢您帮助我学习。

4

3 回答 3

5

你去满足第一个要求

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

检查小提琴

于 2013-08-09T19:50:13.317 回答
4

您想使用 jQueryis()检查下一个项目是否是两个列表中的最后一个

$("#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父级上为 click 事件委托事件委托，因为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'); 
});

更新的小提琴

于 2013-08-09T19:49:05.367 回答
2

只需更改最后一个活动元素（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();
}
于 2013-08-09T19:34:34.737 回答