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

그런 다음 당신은 내가이 여기서 일 것 jsfiddle 구현

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

을 사용하여 UL의 아이들의 선두로부터을 찾아 최대를 셀 수있는 UL 리 목록을 수행하는 경우 :

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

나는 오른쪽 버튼을 누를 때마다 값이 분석되어 정수로 인식되도록 만들었습니다. 그런 다음이 값이 목록의 최대 자식 수를 초과하지 않도록하는 if가 있습니다.

(방금 jsfiddle를 왼쪽 단추 예제를 포함하는 두 번째 버전으로 바꿨습니다. 귀하의 사이트에서 음수 값을 사용할 수 있다는 것을 알았 기 때문입니다.)