jquery - jQuery: .is :last-child (或 first-child) 与特定类

Question

我正在制作自行车目录，其中包括过滤器和用于详细信息的灯箱。

自行车概览由一个包含 li 的大 ul 组成，其中每个 li 代表一辆自行车。详细信息（用于过滤）通过数据属性设置和读取。如果一个li有类.show，它匹配过滤条件，因此显示在概览中。

导航灯箱（上一个/下一个箭头）时，用户应该只看到符合标准（has .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")不工作......我认为这是因为它选择了最后一个孩子而不考虑它是否有 class .show。

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

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

score 3 · Accepted Answer

您可以使用:last选择器。

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

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

score 1 · Accepted Answer

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

和

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

score 0 · Accepted Answer

您还可以使用 jquery .last()

jquery .last() 无论如何都会选择最后一个孩子

所以你的代码会是这样的：

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

score 0 · Accepted Answer

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

IE

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

4 回答 4