JQueryの各関数インデックス

Question

こんにちは、いくつかのJQを調整する助けが必要です。これはすべて機能します（純粋主義者には完璧ではないかもしれませんが）少なくとも私のためには、それは必要なように機能します。しかし、私はいくつかの "追加機能"を追加したいと思いますが、私は各インデックス関数を使用する必要があると思うが、私はどのように/どのような/理由/どこに....

コード<div>が追加され、前のページが隠されてシンプルな "ページ"（呼びたい場合）と、作成された<div>の単純なページネーションが作成されます。私が追加したい追加機能はdivを削除することです - OK削除はNPだけ "適切な<div>を削除（）"しますが、 "each"を使って動的に "再インデックス"できますか？

私は4つの "ページ"を持っている場合、私は（下のコードで）8つのdivの - pagenoは、長さ/ページ数（再度コード）を取得するために使用されるvarです。 PAGENOまだ言い換えれば

<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="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> 

私はその後、pageno==2すなわち

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

を削除した場合は、それが可能動的残りのdivはので、私はそれからだろう「インデックスを再作成」することです上記のように「ギャップ」がなく、順番どおりである。

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

pageno==2は削除されていますか？ここで

は私の現在のコードです：

$(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

私は機能のそれぞれを少し変更しました。何か•これはうまくいくはずです。これが正確に機能するかどうかはわかりません。 jQueryのnextAllを使用して、指定された要素に続く兄弟を取得し、次にeachを反復してページ番号から1を引いています。理にかなっている？

変更が必要な要素の数を減らすために少し変更が加えられました。ページング/削除ボタンは、ページ内のすべての要素を操作して番号を変更する代わりに、作業に使用する直接番号を持っています。

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