title: simple jQuery dynamic pagination
body: <p>rather than downloading and using someone else's awesome plugin, I wanted to write my own pagination script.</p>
  
  <p>here's what I have so far</p>
  
  <p>My question is how would I do the sort function more efficiently? is there a way to identify based off of the var first that I declared and its id relative to the rows and determine something like #something5 is the fifth row, so iterate from the 6th row to the 11th row? instead of using the .next() functions as shown. </p>
  
  <pre><code> &lt;div id="rows"&gt;
       &lt;div class="row" id="something1"&gt;something1&lt;/div&gt;
       &lt;div class="row" id="something2"&gt;something2&lt;/div&gt;
       &lt;div class="row" id="something3"&gt;something3&lt;/div&gt;
       &lt;div class="row" id="something4"&gt;something4&lt;/div&gt;
       &lt;div class="row" id="something5"&gt;something5&lt;/div&gt;
       &lt;div class="row" id="something6"&gt;something6&lt;/div&gt;
       &lt;div class="row" id="something7"&gt;something7&lt;/div&gt;
       &lt;div class="row" id="something8"&gt;something8&lt;/div&gt;
       &lt;div class="row" id="something9"&gt;something9&lt;/div&gt;    
       &lt;div class="row" id="something10"&gt;something10&lt;/div&gt;
       &lt;div class="row" id="something11"&gt;something11&lt;/div&gt;
       &lt;div class="row" id="something12"&gt;something12&lt;/div&gt;
   &lt;/div&gt;
   &lt;a href="#" id="prev"&gt;prev&lt;/a&gt;
   &lt;a href="#" id="next"&gt;next&lt;/a&gt;
   &lt;br /&gt;
   &lt;span id="total"&gt;&lt;/span&gt;
  
   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 &lt; max; i++) {
            $('#rows .row').eq(i).css('display', 'block');
        }
  
        $('#prev').click(function() {
            sort("prev");
        });
  
        $('#next').click(function() {
            sort("next");
        });   
   });
  </code></pre>
  
  <p>Jsfiddle here <a href="http://jsfiddle.net/DcNLJ/" rel="nofollow">http://jsfiddle.net/DcNLJ/</a></p>