다음/이전 확인란으로 스크롤

Question

내 응용 프로그램에 마커/앵커 포인트 시스템을 구현 중입니다. 나는 정기적으로 소켓 프로그래밍을 사용하여 서버로부터 많은 데이터를 얻고있다.

내가 여기 피할 때 데모를 만들었는데, 내가 어려움을 겪고있는 점은 다음 또는 이전에 히트 할 때 텍스트 검색이 스크롤하는 것과 같은 방법으로 모든 체크 된 체크 박스로 스크롤하고 싶다는 것입니다. 사용자가 "다음"버튼을 클릭하면 다음 체크 박스로 이동해야합니다. 마찬가지로 사용자가 "이전"버튼을 누르면 이전 버튼으로 이동합니다. http://jsfiddle.net/naveennsit/TnTj9/7/

HTML :

<div> 
    <button id="next">next</button> 
    <button id="previous">previous</button> 
</div> 
<div id="left"> 
    <div class='cb'> 
     <input type="checkbox" /> 
    </div> 
</div> 
<div id="realTimeContents" class="left realtimeContend_h"><!-- this gets populated --></div> 

JS : 여기

내 바이올린입니다

$(function() { 
    var h = -1; 
    setInterval(function() { 
     var newHeight = $('#realTimeContents').append("Hiiiii. is div").height(); 
     if (h == -1) h = newHeight; 
     if (h != newHeight) { 
      // alert(newHeight); 
      h = newHeight; 
      $("#left").append("<div class='cb'><input type=\"checkbox\" /></div>"); 
     } 
    }, 1000); 
}); 

정말 체크 박스에 스크롤/찾는 어떤 진전을 못했지만, 다음과 같이 생각하면됩니다.

scrollTop: $('.match').eq(searchIndex).get(0).offsetTop 

Answer 1

이것이 원하는 것입니까? 확인 된 확인란의 색인이 포함 된 checked 배열을 만들었습니다. 다음 또는 이전을 클릭하면 현재 상자를 추적하고 해당 상자로 스크롤하는 current var을 변경합니다.

Fiddle

var checked = []; 
var current = 0; 
$("#left").on("click", "input", function() { 
    checked = []; 
    var $cbs = $("#left").find("input"); 
    $("#currRow").text($cbs.index(this)); 
    $cbs.filter(":checked").each(function() { 
     checked.push($cbs.index(this)); 
    }); 
}); 

$("#next").on("click", function() { 
    var idx = (checked.indexOf(current) + 1) % checked.length; 
    gotoBox(idx); 
}); 

$("#previous").on("click", function() { 
    var idx = (checked.indexOf(current) - 1); 
    if (idx < 0) idx = checked.length - 1; 
    gotoBox(idx); 
}); 

function gotoBox(idx) { 
    current = checked[idx]; 
    $("#currRow").text(current); 
    var $box = $("#left").find("input").eq(current); 
    var $content = $("#content"); 
    $content.scrollTop(
    $box.offset().top - $content.offset().top + $content.scrollTop()); 
} 

주

: 그래서이 더 빨리 더 큰 콘텐츠를 테스트 할 수있는 간격을주었습니다.