带有附加 div 的 Jquery 动态分页答案

【问题标题】：Jquery dynamic pagination with append divs带有附加 div 的 Jquery 动态分页
【发布时间】：2011-06-04 16:56:19
【问题描述】：

嗯...我正在尝试一些东西，但不知道如何“完成”它。我通过使用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>');      
});

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

我想要/需要做的是添加一个“后退/下一个”链接，以便您可以“在页面（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>

但是 .. 如果我使用 (alert 只是为了测试获取 prev 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 的“可见” id - 即 page_"x"。

任何想法 - 希望它是“明确的”

【问题讨论】：

#pollpagination 元素在哪里？您可以为此发布 HTML 吗？

标签： jquery dynamic pagination

【解决方案1】：

我不确定我是否关注你，但如果你正在容器中的一组 div 中寻找一个可见的 div，你可以使用 :visible 选择器。即：

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

【讨论】：

非常感谢，我认为“可见”出现在某个地方，但我之前从未“做过”可见，非常感谢

【解决方案2】：

我会使用切换类机制，当你创建/显示一个 div 时，你会添加一个像“visible-div”这样的类，当你隐藏一个 div 时，你会删除它。这样应该很容易知道哪些是可见的，哪些不是。（只需将 .visible-div 附加到选择器）

由于您在同一个地方进行隐藏/显示，因此也很容易保持一致。

【讨论】：