jquery - 如何阻止 .next() 离开 li 列表

Question

我正在开发一个画廊，我使用箭头键导航上一个和下一个列表项。现在使用 .next() 和 .prev() 我能够很好地导航，但是当最后一个列表项在那里并且 jquery 转到 时问题就开始了>.Next().

我怎样才能停止一个进程，它不会在最后一个项目之后继续。

我的意思是 next() 函数在最后一个 Li 之后应用。 这是我的示例代码

  var ul = $('#thumbsList');
ul.find('li').first().addClass('current');

这个添加了一个类。

    $(document).ready(function () {
    $('#nextHandler').click(function () {

        var nextListItem = ul.find('li.current').next();

        ul.find('li.current').removeClass('current');
        nextListItem.addClass('current');
        var imagePath = ul.find('li.current').children('img').data("fullsrc");
        // Setting Image Path to Current Next Image path
        $("#fullImagePlaceholder").attr("src", imagePath);


    });
});

这样就可以完成任务了。 但是当它跳到最后一个LI时问题就开始了。如何阻止它。 谢谢。

Answer 1

您需要使用 if (nextListItem.length > 0) 测试是否有下一个，如解释 here :

 var nextListItem = ul.find('li.current').next();

    if (nextListItem.length > 0)
    {
      ul.find('li.current').removeClass('current');
      nextListItem.addClass('current');
      var imagePath = ul.find('li.current').children('img').data("fullsrc");
      // Setting Image Path to Current Next Image path
      $("#fullImagePlaceholder").attr("src", imagePath);
    }