title: JQuery each function index
body: <p>Hi folks need some help adjusting some JQ.  This all works (may not be perfect to purists) but at least for me it works as it should. However, I would like to add some "additional functionality" which I think needs me to use the each index function, but I don't have a clue how/what/why/where ....</p>
  
  <p>The code dynamically adds <code>&lt;div&gt;</code>'s and hides the previous to create simple "pages" (if you want to call them that) and a simple pagination for the created <code>&lt;div&gt;</code>'s.  The additional functionality I would like to add is to delete a div - OK delete is NP just "remove()" the appropriate <code>&lt;div&gt;</code>, but can I dynamically "reindex" using "each"?  </p>
  
  <p>e.g. if I have 4 "pages" I would have (in code below) 8 div's - <code>pageno</code> is the var used to get the length/number of pages (again code below).</p>
  
  <pre><code>&lt;div class="pagedisplay" id="rhcol0"&gt;text&lt;/div&gt;
  &lt;div class="pagedisplay" id="lhcol0"&gt;text&lt;/div&gt;
  &lt;div class="pagedisplay" id="rhcol1"&gt;text&lt;/div&gt;
  &lt;div class="pagedisplay" id="lhcol1"&gt;text&lt;/div&gt;
  &lt;div class="pagedisplay" id="rhcol2"&gt;text&lt;/div&gt;
  &lt;div class="pagedisplay" id="lhcol2"&gt;text&lt;/div&gt;
  &lt;div class="pagedisplay" id="rhcol3"&gt;text&lt;/div&gt;
  &lt;div class="pagedisplay" id="lhcol3"&gt;text&lt;/div&gt;
  </code></pre>
  
  <p>If I then remove <code>pageno==2</code> i.e. </p>
  
  <pre><code>&lt;div class="pagedisplay" id="rhcol2"&gt;text&lt;/div&gt;
  &lt;div class="pagedisplay" id="lhcol2"&gt;text&lt;/div&gt;
  </code></pre>
  
  <p>is it possible to dynamically "reindex" the remaining divs so I would then have:</p>
  
  <pre><code>&lt;div class="pagedisplay" id="rhcol0"&gt;text&lt;/div&gt;
  &lt;div class="pagedisplay" id="lhcol0"&gt;text&lt;/div&gt;
  &lt;div class="pagedisplay" id="rhcol1"&gt;text&lt;/div&gt;
  &lt;div class="pagedisplay" id="lhcol1"&gt;text&lt;/div&gt;
  &lt;div class="pagedisplay" id="rhcol2"&gt;text&lt;/div&gt;
  &lt;div class="pagedisplay" id="lhcol2"&gt;text&lt;/div&gt;
  </code></pre>
  
  <p>In other words the pageno still remains in order with no "gaps" as above NOT </p>
  
  <pre><code>&lt;div class="pagedisplay" id="rhcol0"&gt;text&lt;/div&gt;
  &lt;div class="pagedisplay" id="lhcol0"&gt;text&lt;/div&gt;
  &lt;div class="pagedisplay" id="rhcol1"&gt;text&lt;/div&gt;
  &lt;div class="pagedisplay" id="lhcol1"&gt;text&lt;/div&gt;
  &lt;div class="pagedisplay" id="rhcol3"&gt;text&lt;/div&gt;
  &lt;div class="pagedisplay" id="lhcol3"&gt;text&lt;/div&gt;
  </code></pre>
  
  <p>Where <code>pageno==2</code> has been removed?</p>
  
  <p>Here is my current code:</p>
  
  <pre><code>$(document).ready(function() {
  $('#addpage').click(function(){
  var pageno = $('.pagebut').length;
  $('.pagedisplay:visible').hide();   
  $('#lhcol').append( '&lt;div class="pagedisplay" id="lhcol'+pageno+'"&gt;'+pageno+'&lt;/div&gt;' );
  $('#rhcol #slider_holder').before( '&lt;div class="pagedisplay" id="rhcol'+pageno+'"&gt;'+pageno+'&lt;/div&gt;' );
  $('#rhcol #slider_holder').show();  
  $('#rhcol #slider_holder').append( ' &lt;a href="#" class="pagebut"&gt;'+pageno+'&lt;/a&gt; ' );
  return false;
  });
  $('.pagebut').live('click',function(){
  var pageno = $(this).html();
  $('.pagedisplay').hide();
  $('#lhtest'+pageno).show();
  $('#rhtest'+pageno).show();
  return false;
  });
  });
  </code></pre>