追加のdivを使用したJqueryの動的ページ区切り

Question

Ummmm ...私は何かを試みていますが、それを「仕上げ」する方法がわかりません。私はappend()を使ってフォームに<div>を追加していますが、問題はありません。私は "新しいページ"として各divを作成しようとしています。したがって、divを追加すると、以前のdivが隠されています。例：

<form class="paginatedform" > 
<div id="page_1" class="paginatedformpage clearfix">Content in here </div> 
</form> 

それから私はこのように「新しいページを追加」：

$('#addpage').click(function(){ 
var newid = $('.paginatedform').length; 
var nextid = newid+1; 
var previd = newid; 
$('#page_'+previd+'').hide(); 
$('.paginatedform').append('<div id="page_'+nextid+'" class="paginatedformpage clearfix">Content in here </div>');  
}); 

それをたくさんOK「最高/きれい」ことが、それは仕事をしないかもしれない「作品」。私が/欲しい

は何をする必要があるあなたができるので、「バック/次」のリンクを追加している「ページ（のdivの）間を移動する」

私はこのような「リンク」を追加します（実際に含まれているが私は（アラ​​ートを使用している場合だけ前を取得してテストするために...

<form class="paginatedform" > 
<div id="page_1" class="paginatedformpage clearfix">Content in here </div> 
<div id="pagepagination"></div> 
</form> 

しかし：しかし、上記のコードは、「全体的な」HTMLは次のようになり、ここで

if(newid ==1) { $('#pagepagination').append('<a href="#" class="pgbk">back</a>'); } 
if(newid ==2) { $('#pagepagination').append('<a href="#" class="pgnxt">next</a>'); } 

「タイムライン」のいくつかのフォームを与えるために移動しましたid）

$('.pgbk').live('click',function(){ 
alert($('#pollpagination').prev('div').attr('id')); 
}); 

または

$('.pgnxt').live('click',function(){ 
alert($('#pollpagination').prev('div').attr('id')); 
}); 

I常に得る "第一" のID、すなわちID = "PAGE_1" 私はIDを "見つける" ために必要なもの "目に見える" ID - すなわちpage_ "X"。

任意のアイデア - うまくいけば、それは

Answer 1

「クリア」である私は、あなたが使用することができ、容器内のdiv要素のセットの中で目に見えるのdivを探しているなら、私はあなたに従いますが、わからない：見えセレクタ。 すなわち：

$('.pgbk').live('click',function(){ 
    alert($('#pollpagination').prev('div:visible').attr('id')); 
}); 


$('.pgnxt').live('click',function(){ 
    alert($('#pollpagination').next('div:visible').attr('id')); //Changed prev to next 
}); 

Answer 2

あなたは/作成したとき、私は、トグルクラスメカニズムを使用するには、あなたがそれに「可視-DIV」のようなクラスを追加し、あなたがそれを削除するのdivを非表示にしたときのdivを示しています。 これは、どちらが可視であり、どちらがそうでないかを知ることは容易でなければなりません。 （セレクタに.visible-divを追加するだけ）

同じ場所に隠れている/表示しているので、物事を一貫性を保つのも簡単です。