jQuery教程$()实现数组元素分页效果的换行功能

最近一周在中文站搜索礼品小工具的需求，这个需求里面有一个分页功能。具体演示见下图：。

相应的js应用程序文件是相同的，页面后面的offer数据已经被隐藏，但是css display:none样式被启用来隐藏后面的offer元素。现在需要实现现有页面元素的分页效果，即页面元素的总集可以通过$(。类)，然后就可以实现分页功能。按照传统的通用惯例，jQuery可以写成如下形式：拷贝代码：var total=$(。类)。长度；//获取要分页的元素总数var radio=3；//根据宽窄屏得到每页显示的报价数：var page size=par sent(total/radio)；//获取总页数；if(总计% radio！=0){ PageSize=1；} var CurrentPage=1；//当前页面为第一页。//向前翻页的代码：$(。leftarrow，parentelem)。bind ('click '，函数(e){ var index=current page-1；if(CurrentPage==1){ return；}else{ $(。类)。css('display '，' none ')；var elemIndex=index * radio//指针$(。类)。eq (elemindex)。要在数组中显示的元素的CSS(“”、“”)；$(.类)。eq(elemIndex 1)。css('display '，' ')；$(.类)。eq(elemIndex 2)。css('display '，' ')；//以上三句可以改写为//$(。类)。eq (elemindex)。CSS ('display '，' ')//。下一个()。CSS ('display '，' ')//。下一个().CSS ('display '，' ')。currentPage=index} })//向后翻页的代码：$(。右箭头，parentelem)。bind ('click '，函数(e){ var index=current page 1；if(CurrentPage==PageSize){ return；}else{ $(。类)。css('display '，' none ')；var elemIndex=index * radio//指针$(。类)。eq (elemindex)。要在数组中显示的元素的CSS(“”、“”)；$(.类)。eq(elemIndex 1)。css('display '，' ')；$(.类)。eq(elemIndex 2)。css('display '，' ')；//以上三句可以改写为//$(。类)。eq (elemindex)。CSS ('display '，' ')//。下一个()。CSS ('display '，' ')//。下一个().CSS ('display '，' ')。currentPage=index}})你发现在翻页的代码中，不管最后一页只有一个报价、两个报价还是全部三个报价，我都是用同一个代码，没有任何判断的复制代码。代码如下： $(。类)。eq (elemin指数)。CSS ('display '，')；$(.类)。eq(elemIndex 1)。css('display '，')；$(.类)。eq(elemIndex 2)。css('display '，')；这三个语句被连续调用。也就是说elemIndex可能出界了，也就是elemIndex$(。即使在这种情况下，$(。类)。eq (eleminindex1)。CSS ('display '，')还是可以的，浏览器不会报错，js照常执行，最终结果还是会完美显示。多亏了jQuery的包装函数生成的juery对象，如果elemindex=$(。类)。长度，$(。类)。eq (eleminindex1)返回一个空的jquery元素对象，即使它不对应于DOM中的元素，它仍然是一个jQuery对象，因此调用。css()方法不会出错，虽然页面没有变化效果；通过这个例子，我们可以理解为什么对于不匹配的元素，jQuey仍然返回jQuery Object而不是null。这种思想为数组分页操作提供了极大的便利，因为它避免了数组索引越界导致的程序错误，从而导致js执行中断，简化了大量数组索引越界的判断。