Question

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 dynamically “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;
});
});

Answer 1

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;
  });
});