防止jQuery计数器超出列表项数

Question

我想弄清楚如何限制一个jQuery计数器动态超过列表中的项目数。

这是我的代码。

HTML：

<div class="mobile-nav"> 
      <div class="left-platform-arrow"></div> 
      <div class="counter"> 
       <span class="number">1</span> 
       <span>/</span> 
       <span class="label">1</span> 
      </div>  
      <div class="right-platform-arrow"></div>  
     </div> 

的jQuery：

$('.right-platform-arrow').on('click', function(){ 
    $('.left li.selected').next().addClass('selected'); 
    $('.left li.selected').prev().removeClass('selected'); 
    $('.main .right .pane-open').next().addClass('pane-open'); 
    $('.main .right .pane-open').prev().removeClass('pane-open');  
    $('.number').text(function(i, t) { 
     return Number(t) + 1; 
    }); 
}); 
$('.left-platform-arrow').on('click', function(){ 
    $('.left li.selected').prev().addClass('selected'); 
    $('.left li.selected').next().removeClass('selected'); 
    $('.main .right .pane-open').prev().addClass('pane-open'); 
    $('.main .right .pane-open').next().removeClass('pane-open'); 
    $('.number').text(function(i, t) { 
     return Number(t) - 1; 
    }); 
}); 
$(".left .label").text(function() { 
    return $(this).closest(".left").find("li").length; 
}); 

你可以看到当前的代码住在http://clearleap.com/platform/the-clearleap-platform/clearplay/（只在移动设备上显示，所以从你的手机查看）。

问题是，如果您不断点击左侧或右侧箭头，该数字将超过最大数量的项目。例如，你可以让它显示77/5这是一个相当烦人的故障。

我该如何解决这个问题？

Answer 1

如果你正在做一个UL李列表，那么你可以通过使用

$('ul').children().length; 

我实现了一个的jsfiddle哪里，这将在这里工作找到了UL的孩子occurence数最大：

http://jsfiddle.net/LKTQT/2/

我已经这样做了，每当按下右键时，该值被解析，以便它被识别为一个整数。然后有一个如果它确保此值不超过列表中的最大数量的子项。

（我刚刚用第二个版本替换了jsfiddle，其中包含一个左键示例，因为我注意到在您的网站上它也允许您进入负值）。