如何知道我是否已到达最后一个“li”项目答案

【问题标题】：How to know if I've reached the last 'li' item如何知道我是否已到达最后一个“li”项目
【发布时间】：2011-01-19 18:39:31
【问题描述】：

我用“li”标签和 jquery 制作了一个幻灯片。

整个 'ul' 分别向 Next/Prev 按钮向左或向右移动，其宽度等于所有幻灯片放在一起的总宽度，即每张 700 像素。并且仅允许在宽度等于 700px 的视口中显示 1 张幻灯片。但是当我点击下一步时，即使没有更多幻灯片，节目也会继续。

解决方案是在最后一张幻灯片显示在视口中时隐藏“下一步”按钮。我该怎么做？

或者也许欢迎其他解决方案...

这是我的简化代码：

var slideList = $('#slideWindow ul')

$('#next').click(function(e){

    slideList.animate({ 'left': '-=700px' });

    if( $('li:last').next() === 0 ){

        $(this).hide();

    } else {

        $(this).show();

    }

    return false;

});

【问题讨论】：

您能否提供一个链接或滑块的 jsfiddle 以查看按钮的确切位置？
@CronosS：感谢您的回复，但这与按钮的放置位置无关，而与它们的工作方式有关。

标签： javascript jquery slideshow

【解决方案1】：

如果当前正在查看应用到li 的特定类classBeingViewed，您可以这样做：

if($('li').last() == $('li.classBeingViewed')){
    $(this).hide();
else {
    $(this).show();
}

或者您可以跟踪索引。这是更可取的，因为它允许双向动画。

var slideList = $('#slideWindow ul');
var listIndex = 0;
var numLiElements = $('li').length;

$('#next').click(function(e){
    slideList.animate({ 'left': '-=700px' });
    if( listIndex == numLiElements ){
        $(this).hide();
    } else {
        listIndex += 1;
        $(this).show();
    }
    return false;
});

然后，当您想要反转动画时，您可以在点击处理程序中将listIndex 递减为$('#previous')。

【讨论】：