如何停止.next()离开李的列表

时间:2013-10-14 08:33:19

标签: jquery

我正在使用箭头键浏览上一个和下一个列表项目的图库。现在使用.next().prev()我能够导航非常好但是当最后一个List Item出现并且jquery转到.Next()时问题就开始了。

如何停止一个不会追溯到最后一个项目的过程。

我的意思是next()函数剂量适用于最后一个李。 这是我的示例代码

  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时开始。如何阻止它。 感谢。

3 个答案:

答案 0 :(得分: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);
    }

答案 1 :(得分:1)

你有这个

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

你可以检查

if (nextListItem.length) {
// .. do the job
}

答案 2 :(得分:-1)

如果仍有项目,则可以随时检查.length是否大于0。这样您就可以在任何对象中导航和查找元素。