jQuery count divs and hide some... dynamic?
<p>I have come across the following code that looks at divs contained inside divWiz and separates them into two halves which the user can switch between.</p>

<p>This is all well and good, but what about if I wanted to make it more dynamic? By that I mean throwing in some pagination.</p>

<p>Using the code below you see that I am generating 50 divs. The code splits them into two even sets of 25 that can be swtiched between using the Next and Previous buttons. </p>

<p><a href="http://jsfiddle.net/qWsga/" rel="nofollow">See jsfiddle for working example</a></p>

<p>Now lets say I want to limit the number of shown divs to 10 instead of 50. I have no idea how to get the navigation between these sets of 10 to generate.</p>

<p>Basically, instead of Next and Previous, I want to see Page: 1, 2, 3, 4, etc</p>

<p>HTML</p>

<pre><code>&lt;input value=" Next " type="button"/&gt;
&lt;input value=" Prev " type="button"/&gt;
&lt;input value=" Show All " type="button"/&gt;
&lt;div id="divWiz"&gt;&lt;/div&gt;
</code></pre>

<p>Javascript</p>

<pre><code>$(function() {
var i, cutoff, total = 50;
for(i=0; i&lt;total; ++i)
    $(document.createElement("div")).html(i).appendTo("#divWiz");

cutoff = total/2;

$("#divWiz &gt; div").hide();
$("#divWiz &gt; div:lt("+cutoff+")").show();

$("input[value=' Next ']").click(function() {       
    $("#divWiz &gt; div").hide();        
    $("#divWiz &gt; div:gt("+(cutoff - 1)+")").show();
});

$("input[value=' Prev ']").click(function() {       
    $("#divWiz &gt; div").hide();        
    $("#divWiz &gt; div:lt("+cutoff+")").show();    });    

$("input[value=' Show All ']").click(function() {       
    $("#divWiz &gt; div").show();        
});        
});
</code></pre>
