Jquery动态分页与附加div

Question

嗯......我正在尝试一些东西，但不知道如何“完成”它。我使用 append() 将

添加到表单中，这不是问题。我试图将每个 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>');      
});

那批“有效”可能不是“最好/最漂亮”，但它确实有效。

我想要/需要做的是添加一个“后退/下一页”链接，以便您可以“在页面（div）之间移动”

我添加这样的“链接”：（实际上包含在上面的代码中，但移动到给出某种形式这里的“时间线”的

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

“整体”html看起来像这样：

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

但是..如果我使用（只是为了测试获取上一个ID而发出警报）

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

或者

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

我总是得到“第一个”id，即id =“page_1”我需要什么“找到“可见”id - 即 page_“x”。

任何想法 - 希望它是“清晰的”

Answer 1

我不确定我是否明白你的意思，但如果你正在容器中的一组 div 中寻找可见的 div，你可以使用 :visible 选择器。
IE：

$('.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 时，您会添加一个像“visible-div”这样的类，当您隐藏一个 div 时，您会删除它。
这样应该很容易知道哪些是可见的，哪些是不可见的。 （只需将 .visible-div 附加到选择器）

由于您在同一位置进行隐藏/显示，因此也很容易保持事物的一致性。