простая jQuery динамическая разбивка на страницы

Question

вместо загрузки и использования чужого потрясающего плагина, я хотел написать собственный скрипт разбиения на страницы.

вот что я до сих пор

Мой вопрос, как я сделал бы функцию сортировки более эффективно? есть ли способ идентифицировать основанный на var сначала, который я объявил, и его id относительно строк и определить что-то вроде # something5 - это пятая строка, так что итерации от 6-й строки до 11-й строки? вместо использования функций .next(), как показано.

<div id="rows"> 
    <div class="row" id="something1">something1</div> 
    <div class="row" id="something2">something2</div> 
    <div class="row" id="something3">something3</div> 
    <div class="row" id="something4">something4</div> 
    <div class="row" id="something5">something5</div> 
    <div class="row" id="something6">something6</div> 
    <div class="row" id="something7">something7</div> 
    <div class="row" id="something8">something8</div> 
    <div class="row" id="something9">something9</div>  
    <div class="row" id="something10">something10</div> 
    <div class="row" id="something11">something11</div> 
    <div class="row" id="something12">something12</div> 
</div> 
<a href="#" id="prev">prev</a> 
<a href="#" id="next">next</a> 
<br /> 
<span id="total"></span> 

var max = 5; 

function sort(x) { 
     if (x == "prev") { 
      var first = $('#rows .row:visible').first().attr('id'); 
      if (first != "something5") { 
       $('#rows .row').hide(); 
       $('#'+first).prev('div').show(); 
       $('#'+first).prev('div').prev('div').show(); 
       $('#'+first).prev('div').prev('div').prev('div').show(); 
       $('#'+first).prev('div').prev('div').prev('div').prev('div').show(); 
       $('#'+first).prev('div').prev('div').prev('div').prev('div').prev('div').show(); 
      } 
     } else { 
      var last = $('#rows .row:visible').last().attr('id'); 
      $('#rows .row').hide(); 
      $('#'+last).next('div').show(); 
      $('#'+last).next('div').next('div').show(); 
      $('#'+last).next('div').next('div').next('div').show(); 
      $('#'+last).next('div').next('div').next('div').next('div').show(); 
      $('#'+last).next('div').next('div').next('div').next('div').next('div').show(); 
     } 
} 

$(document).ready(function() { 
     var total = $('#rows .row').size(); 
     var pages = total/max; 
     $("#total").text("page " + pages + " of " + total); 

     $('#rows .row').hide(); 

     for (i = 0; i < max; i++) { 
      $('#rows .row').eq(i).css('display', 'block'); 
     } 

     $('#prev').click(function() { 
      sort("prev"); 
     }); 

     $('#next').click(function() { 
      sort("next"); 
     }); 
}); 

Jsfiddle здесь http://jsfiddle.net/DcNLJ/

Answer 1

Попробуйте это:

http://jsfiddle.net/DcNLJ/1/

Что осталось фот U нужно сделать, это позаботиться о краевой сценарии (предотвратить к пред при запуске или рядом в конце)

var max = 5; 
var pageNum = 0; 
var _ = $('#rows .row'); 

$(document).ready(function() 
{ 
    var total = _.length; 
    var pages = total/max; 


    $('#prev').click(function() 
    { 
     pageNum--; 
     sort("prev"); 
    }); 

    $('#next').click(function() 
    { 
     pageNum++; 
     sort("next"); 
    }); 

    $('#next').trigger('click'); 

}); 


function sort(a) 
{ 
    _.hide(); 
    _.filter(function (i) 
    { 
     return i >= (pageNum - 1) * max && i < (pageNum) * max; 
    }).show(); 
    $("#total").text("page " + pageNum + " of " + Math.ceil($('#rows .row').length/max)); 
}