Question

我正在制作自行车目录，其中包括过滤和灯箱以获取详细信息。

自行车概述包括一个带有li的大型ul，其中每个li代表一辆自行车。通过数据属性设置和读取详细信息（用于过滤）。如果li的类.show符合过滤条件，则会在概述中显示。

在导航灯箱时（上一个/下一个箭头），用户应该只能看到符合条件的自行车（.show），这就是我的工作。

最后一步（我问这个问题）是：在灯箱中我希望第一辆自行车处于活动状态时“前一个”箭头消失，当最后一辆自行车处于活动状态时，“下一个”箭头应该消失

我试过了：

if ( info.is(":last-child") ) { 
    lightbox.find(".lightbox-nav-next").hide();
} else { 
    lightbox.find(".lightbox-nav-next").show();
};

当info是灯箱中显示的li时。

我想知道为什么info.is(":last-child")无效......我认为这是因为它选择了最后一个孩子，而没有考虑它是否有类.show。

解决此问题的最佳方法是什么？提前谢谢！

编辑：我正在谈论的网页在线：http://dev.onefinitystudios.com/rvs/verkoop.html。 javascript所在的文件是catalogus.js。

Answer 1

您可以使用:last选择器。

您需要检查的是info是否与课程show的最后一项相同，可以使用$('.show:last').is(info)来实现。

if ( $('.show:last').is(info) ) { 
    lightbox.find(".lightbox-nav-next").hide();
} else { 
    lightbox.find(".lightbox-nav-next").show();
}

Answer 2

lightbox.find(".lightbox-nav-next").toggle(function () {
  return ! info.is(".show:last");
});

和

lightbox.find(".lightbox-nav-prev").toggle(function () {
  return ! info.is(".show:first");
});

Answer 3

您也可以使用jquery .last（）

jquery .last（）选择最后一个孩子

所以你的代码应该是这样的：

if ( info.last() ) { 
    lightbox.find(".lightbox-nav-next").hide();
} else { 
    lightbox.find(".lightbox-nav-next").show();
};

Answer 4

尝试使用:last（是的，它不是来自CSS，而是添加了jQuery）

即

if ( info.is(":last") ) { 
   ...

<强> Docs