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

我知道这很简单，但.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'); } }); 

检查小提琴

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

更新小提琴

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