JQuery each function index

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 ....

The code dynamically adds <div>'s and hides the previous to create simple "pages" (if you want to call them that) and a simple pagination for the created <div>'s. The additional functionality I would like to add is to delete a div - OK delete is NP just "remove()" the appropriate <div>, but can I dynamically "reindex" using "each"?

e.g. if I have 4 "pages" I would have (in code below) 8 div's - pageno is the var used to get the length/number of pages (again code below).

<div class="pagedisplay" id="rhcol0">text</div>
<div class="pagedisplay" id="lhcol0">text</div>
<div class="pagedisplay" id="rhcol1">text</div>
<div class="pagedisplay" id="lhcol1">text</div>
<div class="pagedisplay" id="rhcol2">text</div>
<div class="pagedisplay" id="lhcol2">text</div>
<div class="pagedisplay" id="rhcol3">text</div>
<div class="pagedisplay" id="lhcol3">text</div>

If I then remove pageno==2 i.e.

<div class="pagedisplay" id="rhcol2">text</div>
<div class="pagedisplay" id="lhcol2">text</div>

is it possible to dy开发者_如何转开发namically "reindex" the remaining divs so I would then have:

<div class="pagedisplay" id="rhcol0">text</div>
<div class="pagedisplay" id="lhcol0">text</div>
<div class="pagedisplay" id="rhcol1">text</div>
<div class="pagedisplay" id="lhcol1">text</div>
<div class="pagedisplay" id="rhcol2">text</div>
<div class="pagedisplay" id="lhcol2">text</div>

In other words the pageno still remains in order with no "gaps" as above NOT

<div class="pagedisplay" id="rhcol0">text</div>
<div class="pagedisplay" id="lhcol0">text</div>
<div class="pagedisplay" id="rhcol1">text</div>
<div class="pagedisplay" id="lhcol1">text</div>
<div class="pagedisplay" id="rhcol3">text</div>
<div class="pagedisplay" id="lhcol3">text</div>

Where pageno==2 has been removed?

Here is my current code:

$(document).ready(function() {
$('#addpage').click(function(){
var pageno = $('.pagebut').length;
$('.pagedisplay:visible').hide();   
$('#lhcol').append( '<div class="pagedisplay" id="lhcol'+pageno+'">'+pageno+'</div>' );
$('#rhcol #slider_holder').before( '<div class="pagedisplay" id="rhcol'+pageno+'">'+pageno+'</div>' );
$('#rhcol #slider_holder').show();  
$('#rhcol #slider_holder').append( ' <a href="#" class="pagebut">'+pageno+'</a> ' );
return false;
});
$('.pagebut').live('click',function(){
var pageno = $(this).html();
$('.pagedisplay').hide();
$('#lhtest'+pageno).show();
$('#rhtest'+pageno).show();
return false;
});
});

I altered each of the functions a bit. Something •like• this should work. I don't know if this exactly will work. I'm using jQuery's nextAll to grab siblings that follow a given element, and then each to iterate through them and subtract 1 from the page number. Make sense?

I also changed things a little to reduce the number of elements that have to be changed. The paging/remove buttons have a direct number to use for their work, instead of having to work through every element in the page and change numbers around.

$(document).ready(function() {
  $('#addpage').click(function(){
    var pageno = parseInt($('.pagebut').last().html()) + 1;
    $('.pagedisplay:visible').hide();   
    $('#lhcol').append( '<div class="pagedisplay" id="lhcol'+pageno+'">'+pageno+'</div>' );
    $('#rhcol #slider_holder').before( '<div class="pagedisplay" id="rhcol'+pageno+'">'+pageno+'</div>' );
    $('#rhcol #slider_holder').show();  
    $('#rhcol #slider_holder').append( ' <a href="#" class="pagebut" id="pagebut'+pageno+'" data-page_number="'+pageno'">'+pageno+'</a> ' );
    $('#rhcol #slider_holder').append( ' <a href="#" class="remove" id="remove'+pageno'" data-page_number="'+pageno'">Remove '+pageno+'</a> ' );
    return false;
  });
  $('.pagebut').live('click',function(){
    var pageno = $(this).data('page_number');
    $('.pagedisplay').hide();
    $('#lhtest'+pageno).show();
    $('#rhtest'+pageno).show();
    return false;
  });
  $('.remove').live('click', function() {
    var page_number_to_remove = parseInt($(this).data('page_number'));
    var total_pages = $('.pagebut').length;
    $(this).nextAll('.pagebut').each(function(index, elem) { var el = $(elem); el.html(parseInt(el.html()) - 1)});
    $(this).nextAll('.remove').each(function(index, elem) { var el = $(elem); el.html('Remove '+ parseInt(el.html().replace(/Remove /,'')) - 1)});
       $('remove'+page_number_to_remove, 'pagebut'+page_number_to_remove, 'rhcol'+page_number_to_remove, 'lhcol'+page_number_to_remove).remove();
    return false;
  });
});