防止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，其中包含一個左鍵示例，因爲我注意到在您的網站上它也允許您進入負值）。