jQuery教程 $()包装函数来实现数组元素分页效果


Posted in Javascript onAugust 13, 2013

最近一周在做中文站搜索礼品widget的需求,这个需求中有一个分页的功能;具体demo可以参见下图:

jQuery教程 $()包装函数来实现数组元素分页效果

对应的js应用文件是同一个,页面中后面的offer数据已经埋好了,只是启用了css display:none样式把后面的offer元素隐藏了。现在要求对已存在的页面元素实现上下分页效果,也就是页面元素总集可以通过$(.class)获得,然后来实现分页功能。

按照传统的一般做法,用jQuery可写成如下:

var total=$(.class).length; //取得需要分页的元素的总个数
var radio=3;//根据宽窄屏获得每页显示offer条数:
var pageSize=parseInt(total/radio); //获得总页数;
if(total % radio !=0){
   pageSize+=1;  
}
var currentPage=1;  //当前页为第一页
//向前翻页的代码:
$(.leftArrow,parentElem).bind('click',function(e){
var index=currentPage-1;
   if(currentPage==1){
     return;
   }else{
      $(.class).css('display','none');
      var elemIndex=index*radio; //数组中起始要显示的元素的指针
       $(.class).eq(elemIndex).css('display','');
        $(.class).eq(elemIndex+1).css('display','');
        $(.class).eq(elemIndex+2).css('display','');
        //上面三句代码可用next()重写成   
        //$(.class).eq(elemIndex).css('display','')
        //  .next().css('display','')
        //  .next()..css('display','');     
    currentPage=index;
   }
})
//向后翻页的代码:
$(.rightArrow,parentElem).bind('click',function(e){
var index=currentPage+1;
   if(currentPage==pageSize){
     return;
   }else{
      $(.class).css('display','none');
      var elemIndex=index*radio; //数组中起始要显示的元素的指针      
        $(.class).eq(elemIndex).css('display','');
        $(.class).eq(elemIndex+1).css('display','');
        $(.class).eq(elemIndex+2).css('display','');
       //上面三句代码可用next()重写成   
        //$(.class).eq(elemIndex).css('display','')
        //  .next().css('display','')
        //  .next()..css('display','');  
    currentPage=index;
   }
})

大家发现没有,在向后翻页的代码中,无论最后一页只有1条offer,2条offer,还是全部3条offer,我都用同样的代码,不做任何判断

$(.class).eq(elemIndex).css('display',");
$(.class).eq(elemIndex+1).css('display',");
$(.class).eq(elemIndex+2).css('display',");

这3条语句连续调用。

也就是说,elemIndex有可能越界,即elemIndex>$(.class).length,即使在这样的情况下,$(.class).eq(elemIndex+1).css('display',")照样没有问题,浏览器不会报错,js照常执行,最终结果照样能完美展示。这要感谢jQuery的包装函数产生的juery对象,如果elemIndex>=$(.class).length,$(.class).eq(elemIndex+1)返回的是一个空jquery元素对象,虽然它没有对应到DOM中的元素,但它还是一个jQuery对象,因此调用.css()方法不会出错,虽然页面没有任何变化效果;

通过这个例子,就能够理解为什么jQuey对不匹配的元素仍然返回jQuery Object,而不是null,这种思想对数组分页操作来说,提供了极大的便利性,因为避免了数组索引越界引起程序错误,导致js中断执行的情况,简化了分页代码中大量的数组索引越界判断。

Javascript 相关文章推荐
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
javascript实现依次输入input自动定焦
Dec 23 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
Mar 18 Javascript
cookie的secure属性详解
Apr 08 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 #Javascript
js setTimeout 参数传递使用介绍
Aug 13 #Javascript
js setTimeout 常见问题小结
Aug 13 #Javascript
删除select中所有option选项jquery代码
Aug 12 #Javascript
js获取本机的外网/广域网ip地址完整源码
Aug 12 #Javascript
JavaScript解析URL参数示例代码
Aug 12 #Javascript
JS实现Enter键跳转及控件获得焦点
Aug 12 #Javascript
You might like
综合图片计数器
2006/10/09 PHP
杏林同学录(二)
2006/10/09 PHP
php echo 输出字符串函数详解
2010/05/13 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
php向js函数传参的几种方法
2014/08/10 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
python中解析json格式文件的方法示例
2017/05/03 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
python得到电脑的开机时间方法
2018/10/15 Python
python文件拆分与重组实例
2018/12/10 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
社区消防工作实施方案
2014/03/21 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
2016年情人节问候语
2015/11/11 职场文书
600字作文之感受大自然
2019/11/27 职场文书
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
Linux安装apache服务器的配置过程
2021/11/27 Servers